如何使用npm安裝vue和vue-cli

如何使用npm安裝vue和vue-cli？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

一、npm 版本需要大于 3.0，如果低于此版本需要升級它：

# 查看版本
$ npm -v
2.3.0

#升級 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文件

關(guān)于如何使用npm安裝vue和vue-cli問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。