1 vue基礎使用
1.1 hello vue
新建一個hello.html文件，並編輯以下代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue.js!'
}
}
})
</script>
</html>
以上編輯一個簡單的html文件，使用script標籤引入了vue。
在代碼中創建了一個vue對象，並初始化一些參數，如el 指定Vue掛載的元素，上面代碼vue掛載到id爲app的元素中；在data中返回返回message變量，在html中引用message變量，即{{message}}
保存代碼並用瀏覽器打開，可以看到瀏覽器顯示了Hello Vue!
1.2 v-if
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p v-if="seen">現在你看到我了</p>
</div>
</body>
<!--
引用vue.js，參考https://vuejs.org/v2/guide/installation.html
下面是通過<script>引入vue
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
seen: true
}
}
})
</script>
</html>
保存代碼並用瀏覽器打開，可以看到瀏覽器輸出“現在你看到我了”
按F12，並在Console中輸入app.seen=false，回車，瀏覽器輸出內容就消失了
1.3 v-on
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
<button @click="reverseMessage">反轉消息</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>
v-on: 可以簡寫爲@
1.4 其他指令
v-bind、v-for、v-model 等等請參考https://cn.vuejs.org/v2/guide/
2 npm
npm 是 JavaScript 的包管理工具，並且是 Node.js 平臺的默認包管理工具。
npm是用node.js編寫的，因此需要安裝node.js才能使用npm。安裝node.js後，就已經自帶npm。
2.1 安裝包命令
npm install <package_name> // package_name: 包名
上述命令執行之後將會在當前的目錄下創建一個node_modules的目錄(如果不存在的話)，然後將下載的包保存到這個目錄下。安裝完成之後，就可以使用它了
2.2 package.json
package.json用於管理你所安裝的npm包的依賴，在開發過程中能清楚的查詢安裝的包的版本以及項目中使用的包依賴，便於開發組成員共享。以及項目的配置信息（比如名稱、版本號、項目描述、許可證等元數據）。
3 vue-cli
3.1 安裝vue-cli
npm install -g vue-cli
3.2 使用vue-cli創建vue項目
創建：vue init <template-name> <project-name>
template-name是模板，常用的是webpack
vue init webpack demo 輸入該命令後，會要求輸入項目相關信息
項目創建後的文件目錄結構
|-- build // 項目構建(webpack)相關代碼 | |-- build.js // 生產環境構建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- utils.js // 構建工具相關 | |-- vue-loader.conf.js // webpack loader配置 | |-- webpack.base.conf.js // webpack基礎配置 | |-- webpack.dev.conf.js // webpack開發環境配置,構建開發本地服務器 | |-- webpack.prod.conf.js // webpack生產環境配置 |-- config // 項目開發環境配置 | |-- dev.env.js // 開發環境變量 | |-- index.js // 項目一些配置變量 | |-- prod.env.js // 生產環境變量 | |-- test.env.js // 測試腳本的配置 |-- src // 源碼目錄 | |-- components // vue所有組件 | |-- router // vue的路由管理 | |-- App.vue // 頁面入口文件 | |-- main.js // 程序入口文件，加載各種公共組件 |-- static // 靜態文件，比如一些圖片，json數據等 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義代碼格式 |-- .eslintignore // eslint檢測代碼忽略的文件（夾） |-- .eslintrc.js // 定義eslint的plugins,extends,rules |-- .gitignore // git上傳需要忽略的文件格式 |-- .postcsssrc // postcss配置文件 |-- README.md // 項目說明，markdown文檔 |-- index.html // 訪問的頁面 |-- package.json // 項目基本信息,包依賴信息等