一、安裝node和vue腳手架
1.下載node：http://nodejs.cn/download/
雙擊安裝，一路下一步到安裝成功，打開cmd，執行node -v，出現版本號，則說明安裝成功
2.配置使用淘寶鏡像：
npm的服務器在國外。那么可以安裝一下cnpm，並且指定鏡像為淘寶的鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org
以后就可以使用cnpm來安裝包了
3.安裝腳手架：cnpm install -g @vue/cli
查看版本號：vue -V
二、使用創建vue腳手架項目
- 在指定路徑下使用
vue create [項目名稱]創建項目。 - 會讓你選擇要安裝哪些包（默認是
Babel和ESLint），也可以手動選擇。 - 如果在安裝的時候比較慢，可以在安裝的時候使用淘寶的鏈接：
vue create -r https://registry.npm.taobao.org [項目名稱]。 - 如果實在不想在創建項目的時候都指定淘寶鏈接，可以在當前用戶目錄下，找到
.npmrc(若沒有則手動創建)，然后設置registry=https://registry.npm.taobao.org。
選自定義配置，按空格標識為選中
是否使用history模式，選n（NO）
CSS預編譯器，選node-sass編譯模式
ESLint代碼規范，選擇ESLint + Prettier
何時進行代碼檢測，選擇 保存的時候檢測
Babel、PostCSS、ESLint等配置文件存放位置，選擇單獨保存在各自的配置文件中
是否保存以上選擇的配置：
y：yes，保存以上選擇的配置，下次用腳手架創建項目的時候，可以直接選則此次保存的配置，不用重復的選擇配置
n：NO，不保存以上選擇的配置下次用腳手架創建項目的時候，重新走一次以上的流程，每一項重新選擇
以上所有選項列表
創建成功
項目結構介紹：
1.node_modules：本地安裝的包的文件夾。
2.public：項目出口文件。
3.src：項目源文件：
assets：資源文件，包括字體，圖片等。
components：組件文件。
App.vue：入口組件。
main.js：webpack在打包的時候的入口文件。
4.babel.config.js：es*轉低級js語言的配置文件。
5.package.json：項目包管理文件。
運行項目
終端-->>新建終端-->>npm run serve
入口文件為main.js
初始化時，頁面渲染的為app.vue組件
可以改為自定義的組件
<template>
<div>
hello vue
<input type="text" ref="inputText">
<button @click="handleAdd()">add</button>
<ul>
<li v-for="data in datalist" :key="data">
{{ data }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
datalist: ['aaa', 'bbb', 'ccc']
}
},
methods: {
handleAdd() {
console.log('觸發了handleAdd ', this.$refs.inputText.value)
this.datalist.push(this.$refs.inputText.value)
}
}
}
</script>
<style lang="scss">
ul {
list-style: none;
li {
background: blue;
}
}
</style>