參考博客:https://www.runoob.com/w3cnote/vue2-start-coding.html
我是mac電腦
先確保電腦中已經(jīng)安裝了npm 并且使用npm安裝過了node两入。 如果沒有便瑟,可以參考另一篇文章: http://www.reibang.com/p/2352a2b4cb14
安裝webpacket
執(zhí)行命令 npm install webpack -g
安裝腳手架 vue-cli
執(zhí)行命令npm install @vue/cli -g
創(chuàng)建項目
在硬盤上找一個文件夾放工程用的,在終端中進入該目錄
cd 目錄路徑
vue create <project-name>
根據(jù)提示完成創(chuàng)建
現(xiàn)在比較流行這樣的創(chuàng)建方式,再自己配置一個vue.config.js文件已添。vue.config.js文件配置可以參考文章:http://www.reibang.com/p/b358a91bdf2d
創(chuàng)建完成后如下圖所示結(jié)構(gòu):
啟動項目
終端來到此項目文件夾,使用命令npm run serve
啟動服務(wù)器
啟動后復(fù)制鏈接 http://localhost:8080/ 或者http://10.10.30.88:8080/ 到瀏覽器打開芭挽。 也可以在同一個局域網(wǎng)內(nèi)的其他設(shè)備上用瀏覽器打開鏈接http://10.10.30.88:8080/
下面的使用模板創(chuàng)建可以選擇不看0堤簟!R渭懂算!
根據(jù)模板創(chuàng)建項目(需要vue-cli 3.0以下版本 或者安裝vue-cli-init)
vue init <template-name> <project-name不能用中文>
從而自動生成的項目模板,比較常用的模板有webpack庇麦、webpack-simple计技、browserify等模板。
下面使用 vue init webpack test 命令來創(chuàng)建一個基于 webpack 模板的新項目
會有一些初始化的設(shè)置山橄,如下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(然后會下載 vue2.0模板垮媒,這里可能需要連代理)
Project name (vue-test)直接回車默認
Project description (A Vue.js project) 直接回車默認
Author 寫你自己的名字
命令行實例:
Project name ==> 工程名 回車即可
Project description ==> 工程描述 回車即可
Author ==> 作者 隨便填一下
Vue build ==> 打包方式,回車即可航棱;
Install vue-router ==> 是否要安裝 vue-router睡雇,項目中肯定要使用到 所以Y 回車;
Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車饮醇;
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車它抱;
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車;
Should we run npm install
for you after the project has been created? ==> 是否使用npm安裝依賴 回車即可
cd 命令進入創(chuàng)建的工程目錄
安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請求模塊vue-resource
npm install vue-router vue-resource --save
啟動項目
npm run dev
運行成功會看到這個頁面
最后就是在編譯器中編寫項目咯~~