搭建vscode+vue環境

轉自：https://blog.csdn.net/mao834099514/article/details/79138484

 

 

1、安裝vue.js

1.簡介

Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js是一個MVVM模式的框架，若是讀者有angular經驗，必定可以很快入門Vue的

vue.js的特色:

易用： 已經會了HTML,CSS,JavaScript？即刻閱讀指南便可開始構建應用！

靈活： 簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

高效： 16kb min+gzip 的運行大小,超快虛擬 DOM ,最省心的優化

2.環境搭建

vue推薦開發環境:

Node.js: javascript運行環境(runtime),不一樣系統直接運行各類編程語言

npm: Nodejs下的包管理器。因爲國內使用npm會很慢,這裏推薦使用淘寶NPM鏡像（http://npm.taobao.org/）
$ npm install -g cnpm –registry=https://registry.npm.taobao.org

webpack: 它主要的用途是經過 CommonJS 的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。

vue-cli: 用戶生成Vue工程模板

3.安裝node.js

從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了（傻瓜式安裝）。
安裝完成以後，打開命令行工具，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功。

 

npm包管理器，是集成在node中的，因此，直接輸入 npm -v就會以下圖所示，顯示出npm的版本信息。

4.安裝cnpm

因爲有些npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗，全部我還須要npm的國內鏡像—cnpm。

在命令行中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 而後等待，安裝完成以下圖。

完成以後，咱們就能夠用cnpm代替npm來安裝依賴包了。若是想進一步瞭解cnpm的，查看淘寶npm鏡像官網。

5.安裝vue-cli腳手架構建工具

在命令行中運行命令 npm install -g vue-cli ，而後等待安裝完成。
經過以上三部，咱們須要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。

6.用vue-cli構建項目

要建立項目，首先咱們要選定目錄，而後再命令行中把目錄轉到選定的目錄。在這裏，我選擇桌面來存放新建的項目，則咱們須要先把目錄cd到桌面，以下圖。

在桌面目錄下，在命令行中運行命令 vue init webpack firstVue 。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（個人實例中，會在桌面生成該文件夾），以下圖。

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

打開firstVue文件夾，項目文件以下所示。

這就是整個項目的目錄結構，其中，咱們主要在src目錄中作修改。這個項目如今還只是一個結構框架，整個項目須要的依賴資源都尚未安裝，以下圖。

7.安裝項目所需的依賴
要安裝依賴包，首先cd到項目文件夾（firstVue文件夾），而後運行命令 cnpm install ，等待安裝。

安裝完成以後，會在咱們的項目目錄firstVue文件夾中多出一個node_modules文件夾，這裏邊就是咱們項目須要的依賴包資源。

安裝完依賴包以後，就能夠運行整個項目了。

8.運行項目
在項目目錄中，運行命令 npm run dev ，會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

這裏簡單介紹下 npm run dev 命令，其中的「run」對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。運行成功後，會看到以下所示的界面。

2、安裝配置vscode
1.Visual Studio Code編輯器在Windows上安裝比較簡單，直接setup.exe。安裝好後首次啓動配置插件，插件配置必須聯網，從網上下載。以下圖點擊左側擴展：

2.配置
文件->首選項->設置

{
"workbench.iconTheme": "vscode-icons",
"editor.fontSize": 20,
"editor.renderIndentGuides": false,
"files.autoSave": "afterDelay",
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css/",
"background.customImages": [
"file:///D://222.png"
],
"background.useDefault": false,
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "102%",
"height": "100%",
"background-position": "0%",
"background-repeat": "no-repeat",
"opacity": 0.3
},
"editor.quickSuggestions": {
"strings": true
},
"cssrem.rootFontSize": 12,
"cssrem.autoRemovePrefixZero": false,
"cssrem.fixedDigits": 3,
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"vue",
"html"

]
},
"workbench.colorTheme": "Dark-Dracula",
"vetur.format.defaultFormatter.html": "js-beautify-html"
// "emmet.syntaxProfiles":{
// "vue-html":"html",
// "vue":"html"
// },
// "files.associations": {
// "*.vue":"html"
// },
// "eslint.validate":["javascript","javascriptreact","html"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
3、集成element
安裝完nodejs的全部，能正常運行整個項目後，將element集成到項目中的步驟以下：
1.在cmd命令行進入到項目根目錄輸入cnpm i element-ui -S
2.安裝完成以後，package.json文件會增長element-ui依賴

3.用完整引入方式在main.js中寫入如下內容

這裏特別注意一點，以前上圖標識提到的新增註釋掉的語句是不須要註釋掉的，他是樣式文件，若是註釋掉就沒法引用此框架樣式，之因此安裝時出錯是裏面的路徑和網上提供的不一致，實際仍是按照本身項目下的路徑名來定義，如個人項目下面此框架的樣式路徑是這樣：
element-ui/lib/theme-chalk/index.css

4.可使用安裝依賴 cnpm install 5.最後運行 npm run dev 6.能夠測試在App.vue文件添加 效果顯示