第一種方法
第一步,先檢查電腦上有沒有安裝node.js隘世,如果沒有安裝node.js就先去安裝node.js
1.下載地址為:https://nodejs.org/en/筒扒。
2.檢查是否安裝成功==》 在命令面板輸入node -v進行檢查查詢怯邪,輸出的是node的版本號則表示安裝成功了
3.為了提高運行效率,還需要安裝一個淘寶鏡像
3.1輸入npm install -g cnpm –registry=https://registry.npm.taobao.org霎肯,就可以安裝淘寶鏡像
第二步擎颖,搭建vue項目
1.npm?install vue-cli --global? ? ?全局安裝
2。輸入vue init webpack demo (demo為項目的名字可以隨便定)創(chuàng)建項目名 ,輸完這個命令后就會出現(xiàn)以下的界面
Project name ===>表示輸入項目名稱观游,自行輸入
Project description ===>表示項目描述搂捧,自行輸入
Anthor ===>表示項目作者 ,自行輸入
Vue build ===> 表示打包方式懂缕,按下回車鍵就行
Install vue-router ===> 表示是否要安裝vue-router 允跑,輸入Y表示要安裝,輸入N表示不要安裝
Use ESLint to lint your code ===>表示是否需要js語法檢測搪柑,輸入Y表示需要,輸入N表示不需要
Pick an ESLint preset ===>表示選擇一個eslint的預設聋丝,按下回車鍵就行
Set up unit teste ===>表示是否安裝單元測試工具,輸入Y表示要安裝工碾,輸入N表示不要安裝
Setup e2e tests with Nightwatch ===>表示是否需要安裝端測試工具弱睦,輸入Y表示要安裝,輸入N表示不要安裝
最后會出現(xiàn)一個這樣的選擇渊额,這個選擇表示的是選擇安裝依賴的方式
直接按下箭頭選擇最后一個就可以了况木,
第三步,進入到我們創(chuàng)建的項目里面去安裝依賴旬迹,這里可以用vscode去打開創(chuàng)建的項目火惊,然后在vscode的終端中輸入npm install?
1.npm install ===>表示安裝依賴
第四步,最后在vscode的終端中輸入npm run dev 就可以啟動項目了
注意第一種方式不可以使用嵌套的style樣式
第二種方式
第一步奔垦,先檢查電腦上有沒有安裝node.js屹耐,如果沒有安裝node.js就先去安裝node.js
1.下載地址為:https://nodejs.org/en/。
2.檢查是否安裝成功==》 在命令面板輸入node -v進行檢查查詢椿猎,輸出的是node的版本號則表示安裝成功了
3.為了提高運行效率惶岭,還需要安裝一個淘寶鏡像
3.1輸入npm install -g cnpm –registry=https://registry.npm.taobao.org寿弱,就可以安裝淘寶鏡像
第二步,搭建vue項目
1.npm install -g @vue/cli? 全局安裝vue框架
2.npm create project-vue? 項目名稱俗他,這里我的項目名稱是project-vue? ==>?npm create project-vue?
3.輸入完上面的命令后就會出現(xiàn)一下圖片展示的內(nèi)容
4.your connection to the default yarn registry seems to be slow use https://registry.npm.taobao.org for faster installation ===>表示的意思是您到默認紗線注冊表的連接似乎很慢使用淘寶鏡子脖捻,安裝更快,一般輸入yes
5.Please pick a preset 會有三個選項如下圖所示兆衅,我們這里選擇最后一個
6.然后就會得到如下圖所示的樣子,根據(jù)你需要選擇就行嗜浮,空格表示*羡亩,有*的按下空格就會把*取消掉,反之就會選擇*
7.然后按下回車鍵就會得到如下圖所示的樣子
choose a version of vue.js that you want to start the project with ===>是詢問你是選擇2.x還是3.x
use class-style component syntax ===> 是否使用使用類樣式的組件語法 選擇yes
use babel alongside typeScript (required for modern mode, auto-detected polyfills, transpiling JSX) ==>在typeScript旁邊使用babel(對于現(xiàn)代模式危融,自動檢測的polyfills畏铆,編譯JSX都是必需的) 選擇no
use history mode for router (requires proper server setup for index fallback in production) ===>為路由器使用歷史模式(在生產(chǎn)中需要為索引回退設置適當?shù)姆掌? 選擇yes
pick a css pre-processor ===>選擇一個css的預處理器 選擇less?
where do you prefer placing config for babel eslint etc ===>你更喜歡在哪里放置配置Babel eslint等 選擇in package.json
save this as a preset for future projects ===>?將此保存為未來項目的預設值,這里就是設置預設了吉殃,可以選擇將這些配置設置為預設辞居,方便下次快速創(chuàng)建 選擇yes和no都可以
save preset as ===>?保存預置,預設名字? 名字可以自己起蛋勺。這里我起的是的c-vue
pick the package manager to use when installing dependencies ===>?選擇安裝依賴項時要使用的包管理器 這里我選擇的是npm
最后就是用vscode打開項目瓦灶,并在集成終端中去運行并安裝依賴