时间：2019年3月
关键字：vue、npm、nodejs、理解、安装、使用
1. 基本概念
1.1. Node.js
Node.js本身不是一种编程语言，它是一个基于Chrome V8 引擎的JS运行环境。有了Node.js，JavaScript不再仅限于前端开发，也可以进行服务端开发。
1.2. npm
npm是Node.js的包管理工具，它与Python的`pip`、Golang的`go get`等类似。npm不仅用于包管理，它还被用于运行代码（`npm run dev`）、打包版本（`npm run build`）等。
1.3. Vue.js
a、狭义的理解
可以把Vue.js理解为一个JavaScript库。你可以在html中直接引入并使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
</script>
</body>
</html>
Vue.js通过标签和数据的绑定，实现了页面显示和数据变量之间的自动同步。
b、广义的理解
vue不仅仅是一个JS库，它延伸出了模板（`*.vue`）、路由（vue-router）等概念。
1.4. vue-cli
vue-cli，如果理解cli就很好理解vue-cli了。CLI，command-line interface，就是命令行界面的意思。vue-cli提供创建vue项目等命令。
1.5. Vue.js和Node.js的关系
Vue.js本身只是一个JS库，可以通过npm进行管理。Node.js可以提供vue开发过程中需要用到的初始化工程、打包等工具。
2. 安装
2.1. Node.js及npm
root@debian:~# apt-get update root@debian:~# apt-get install apt-transport-https root@debian:~# curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add - root@debian:~# echo 'deb https://deb.nodesource.com/node_11.x stretch main' > /etc/apt/sources.list.d/nodesource.list root@debian:~# apt-get update root@debian:~# apt-get install nodejs root@debian:~# node -v v11.11.0 root@debian:~# npm -v 6.7.0
注：node_11.x可替换为node_10.x等，stretch可替换为jessie或buster。
2.2. 安装vue-cli
root@debian:~# npm install --global vue-cli root@debian:~# vue -V 2.9.6
注：1、vue-cli安装的是shell命令，所以需要使用`–global`参数。
2、由于shell命令是安装到系统目录，所以安装过程需要root权限。
3. 创建vue工程
user1@debian:~# vue init webpack vue-demo user1@debian:~# cd vue-demo user1@debian:~/vue-demo# npm run dev
浏览器输入地址`http://localhost:8080/`
4. 工程目录说明
4.1. package.json文件
{
...
"scripts": {
"dev": ".."
"start": "..."
"unit": "..."
"e2e": "..."
"test": "..."
"lint": "..."
"build": "..."
}
}
scripts下的key与命令`npm run dev`和`npm run build`等一一对应
4.2. src目录
编写代码的地方
4.3. 理解代码的线索
依次阅读`index.html`、`src/main.js`、`src/App.vue`、`src/router/index.js`等文件
重点关注`<div id=”app”>`、`<router-view/>`等关键字。
5. 写代码
src/App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-link to="/first">First</router-link> <router-link to="/second">Second</router-link> <router-view/> </div> </template> ...
router/indes.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import Second from '@/components/Second'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/first',
name: 'First',
component: First
},
{
path: '/second',
name: 'Second',
component: Second
}
]
}]
src/components/first.vue
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
name: 'First',
data () {
return {
msg: 'Welcom to First'
}
}
}
src/components/second.vue
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
name: 'Second',
data () {
return {
msg: 'Welcom to Second'
}
}
}
运行代码
执行脚本
root@debian:~/vue-demo# npm run dev
打开页面
http://localhost:8080/
参考
* https://deb.nodesource.com/setup_11.x
* http://www.runoob.com/try/try.php?filename=vue_intro