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