Vue.js 現(xiàn)在在后端、前端、微信、移動(dòng)端Web非常流行,今天簡(jiǎn)單模擬Vue.js快速安裝;
成都創(chuàng)新互聯(lián)專注于郟縣企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站制作。郟縣網(wǎng)站建設(shè)公司,為郟縣等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
1.安裝npm
npm 是node.js 的包管理工具, 安裝流程地址:https://docs.npmjs.com/cli/install
估計(jì)會(huì)非常慢,我們可以使用淘寶NPM鏡像下載安裝:https://npm.taobao.org/
##安裝npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安裝Vue
## 全局安裝 vue-cli## sudo npm install -g vue-cli
3.創(chuàng)建Vue 模板
## 創(chuàng)建一個(gè)基于 "webpack" 模板的新項(xiàng)目 sudo vue init webpack my-project ? Project name 項(xiàng)目名 ? Project description 項(xiàng)目名描述 ? Author 作者郵箱 ? Use ESLint to lint your code? 是否需要ESlist語(yǔ)法檢查 ? Setup unit tests with Karma + Mocha? 是否需要單元測(cè)試 ? Setup e2e tests with Nightwatch? Yes是否需要e2e測(cè)試
4.安裝Vue 依賴
##下載依賴## sduo npm install
在項(xiàng)目路徑下多出的依賴包…
5.運(yùn)行項(xiàng)目
##運(yùn)行vue## sudo npm run dev
該命令可以項(xiàng)目下package.json 中找到…
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "e2e": "node test/e2e/runner.js", "test": "npm run e2e" },
同時(shí)也可以Vue官網(wǎng)上找到… http://vuejs.org.cn/guide/installation.html#命令行工具
my-project eason$ sudo npm run dev Password: > btbu.edu_project@1.0.0 dev /Users/eason/my-project > node build/dev-server.js Listening at http://localhost:8080 webpack built afe85d235050b4bfe7d7 in 3096ms Hash: afe85d235050b4bfe7d7 Version: webpack 1.13.2 Time: 3096ms Asset Size Chunks Chunk Names app.js 1.06 MB 0 [emitted] app index.html 249 bytes [emitted] Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 21.5 kB 0 webpack: bundle is now VALID.
注:運(yùn)行時(shí)可以出現(xiàn)以下結(jié)果,原因是npm install 依賴沒(méi)有完全安裝,需要再一次執(zhí)行sudo npm install
node build/dev-server.js module.js:341 throw err; ^ Error: Cannot find module 'express' at Function.Module._resolveFilename (module.js:339:15) at Function.Module._load (module.js:290:25) at Module.require (module.js:367:17) at require (internal/module.js:16:19) at Object.(/Users/eason/my-project/build/dev-server.js:2:15) at Module._compile (module.js:413:34) at Object.Module._extensions..js (module.js:422:10) at Module.load (module.js:357:32) at Function.Module._load (module.js:314:12) at Function.Module.runMain (module.js:447:10) npm ERR! Darwin 14.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev" npm ERR! node v5.6.0 npm ERR! npm v3.6.0 npm ERR! code ELIFECYCLE
運(yùn)行成功監(jiān)聽(tīng)在8080 端口..
Listening at http://localhost:8080
最后瀏覽器輸入http://localhost:8080/看到以下界面說(shuō)明安裝成功了
補(bǔ)充兩種sublime text 對(duì)vue插件支持
1.Package Control 安裝 https://packagecontrol.io/installation#st3
2.使用Prettify
在Sublime Text中,按下Ctrl+Shift+P調(diào)出命令面板;
輸入install 調(diào)出 Install Package 選項(xiàng)并回車;
輸入pretty,并在列表中選擇HTML-CSS-JS Prettify后回車即可安裝
ps: 不是挺簡(jiǎn)單的, 動(dòng)手試一試
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。