Vue学习笔记：使用CLI构建Vue项目

一、安装Vue CLI

要用到集成在node.js里的npm来安装Vue CLI。

1、下载并安装node.js

2、配置node.js的环境变量

3、启动命令行，查看node版本

4、查看npm的版本

5、安装vue cli

nmp install -g vue-cli

二、构建前端项目

1、命令行方式构建vue项目

（1）创建工作空间目录e:\workspace

（2）在命令行进入工作空间目录

（3）基于webpack模板生成vue项目hw-vue

vue init webpack hw-vue

发布命令之后，按照提示进行配置：

等待项目构建成功：

（4）查看vue项目hw-vue结构

（5）进入hw-vue项目，发布nmp run dev命令运行项目

（6）在浏览器里访问http://localhost:8080

2、利用集成开发环境构建vue项目

利用流行的集成开发环境Intellij IDEA来创建vue项目。

（1）在Intellij里安装vue插件

安装完插件之后，重启集成开发环境即可。

（2）新建vue项目hw-vue-test

（3）在终端执行npm run serve命令

（4）在浏览器里访问http://localhost:8081

既可以在终端输入npm run serve命令，也可以采用图形界面的方式来做。

这些命令都是在package.json里预先定义好了的：

三、Vue项目结构

利用脚手架CLI构建的vue项目，目录结构下图所示：

1、首页文件index.html

2、根组件App.vue

3、入口文件main.js

4、router目录下的index.js（路由文件）

5、HelloWord.vue组件

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><ahref="https://vuejs.org"target="_blank">Core Docs</a></li><li><ahref="https://forum.vuejs.org"target="_blank">Forum</a></li><li><ahref="https://chat.vuejs.org"target="_blank">Community Chat</a></li><li><ahref="https://twitter.com/vuejs"target="_blank">Twitter</a></li><br><li><ahref="http://vuejs-templates.github.io/webpack/"target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><ahref="http://router.vuejs.org/"target="_blank">vue-router</a></li><li><ahref="http://vuex.vuejs.org/"target="_blank">vuex</a></li><li><ahref="http://vue-loader.vuejs.org/"target="_blank">vue-loader</a></li><li><ahref="https://github.com/vuejs/awesome-vue"target="_blank">awesome-vue</a></li></ul></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

问题：如何在项目里添加一个新页面？

1、在components目录下新建一个Vue组件

2、修改router目录下的路由文件index.js

3、启动应用程序

5、访问新页面http://localhost:8080/#/believe