用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
一、npm 版本需要大于 3.0，如果低于此版本需要升級(jí)它：
# 查看版本 $ npm -v 2.3.0 #升級(jí) npm cnpm install npm -g
二、在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝：
# 最新穩(wěn)定版 $ cnpm install vue
三、Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。
# 全局安裝 vue-cli $ cnpm install --global vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 $ vue init webpack my-project # 這里需要進(jìn)行一些配置，默認(rèn)回車即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author runoob <test@runoob.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
四、進(jìn)入項(xiàng)目，安裝并運(yùn)行：
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080
成功執(zhí)行以上命令后訪問(wèn) http://localhost:8080/，輸出結(jié)果如下所示：
注意1：Vue.js 不支持 IE8 及其以下 IE 版本。
注意2：要想在本地瀏覽頁(yè)面效果，npm必須運(yùn)行。如果已經(jīng)關(guān)閉，按照以上第四步指令再次進(jìn)入即可；
注意3：如果想在服務(wù)器端運(yùn)行網(wǎng)頁(yè)，先在npm中將網(wǎng)站打包，打包命令 npm run build;
注意4：想在npm執(zhí)行打包命令，要先“ctrl+c”終止npm正在運(yùn)行的批處理操作；
注意5：想在某一個(gè)盤(pán)中創(chuàng)建一個(gè)項(xiàng)目并按照腳手架，如：在E盤(pán)中創(chuàng)建一個(gè)“myFirstVue”項(xiàng)目
方法1： 進(jìn)入E盤(pán)的“myfirstVue”文件夾，按住“shift+右鍵”， 打開(kāi)管理員窗口
方法2：“win+R”輸入“cmd”進(jìn)入管理員窗口，輸入“E：”進(jìn)入E盤(pán)，再輸入“cd myFirstVue”進(jìn)入myFirstVue文件
以上這篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題
- html-webpack-plugin修改頁(yè)面的title的方法
- 深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)
- webpack DllPlugin xxx is not defined解決辦法
- vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
- 詳解node.js中的npm和webpack配置方法
- 如何基于webpack創(chuàng)建plugin并發(fā)布npm包
相關(guān)文章
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫(kù)
構(gòu)建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫(kù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
大文件下載,花費(fèi)的時(shí)間比較長(zhǎng),沒(méi)有任何提示,用戶體驗(yàn)很差,需要優(yōu)化,提示文件在下載中,并且顯示進(jìn)度百分比,下面小編給大家?guī)?lái)了Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,感興趣的朋友一起看看吧2024-03-03
Vue-admin-template?添加、跳轉(zhuǎn)子頁(yè)面問(wèn)題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue引入子組件命名不規(guī)范錯(cuò)誤的解決方案
這篇文章主要介紹了vue引入子組件命名不規(guī)范錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue中的row布局靠右對(duì)齊,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue如何搭建多頁(yè)面多系統(tǒng)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了vue搭建多頁(yè)面多系統(tǒng)應(yīng)用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問(wèn)題
這篇文章主要介紹了解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue項(xiàng)目關(guān)閉eslint校驗(yàn)
eslint是一個(gè)JavaScript的校驗(yàn)插件，通常用來(lái)校驗(yàn)語(yǔ)法或代碼的書(shū)寫(xiě)風(fēng)格。這篇文章主要介紹了vue項(xiàng)目關(guān)閉eslint校驗(yàn),需要的朋友可以參考下2018-03-03