用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ī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í)行以上命令后訪問 http://localhost:8080/，輸出結(jié)果如下所示：
注意1：Vue.js 不支持 IE8 及其以下 IE 版本。
注意2：要想在本地瀏覽頁面效果，npm必須運(yùn)行。如果已經(jīng)關(guān)閉，按照以上第四步指令再次進(jìn)入即可；
注意3：如果想在服務(wù)器端運(yùn)行網(wǎng)頁，先在npm中將網(wǎng)站打包，打包命令 npm run build;
注意4：想在npm執(zhí)行打包命令，要先“ctrl+c”終止npm正在運(yùn)行的批處理操作；
注意5：想在某一個(gè)盤中創(chuàng)建一個(gè)項(xiàng)目并按照腳手架，如：在E盤中創(chuàng)建一個(gè)“myFirstVue”項(xiàng)目
方法1： 進(jìn)入E盤的“myfirstVue”文件夾，按住“shift+右鍵”， 打開管理員窗口
方法2：“win+R”輸入“cmd”進(jìn)入管理員窗口，輸入“E：”進(jìn)入E盤，再輸入“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ò)的問題
- html-webpack-plugin修改頁面的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 的入口文件開始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過奧2021-09-09
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 封裝 Adminlte3組件的實(shí)現(xiàn)
這篇文章主要介紹了vue 封裝 Adminlte3組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件詳解
這篇文章主要介紹了vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)消息的無縫滾動(dòng)效果的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)消息的無縫滾動(dòng)效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個(gè)項(xiàng)目需求是這樣的，前端vue?必須對(duì)象傳遞后端也必須對(duì)象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01
Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)
這篇文章主要介紹了Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07