1. Vue的环境搭建

本文主要介绍如何搭建 Vue 的开发环境，最优化的工具实践等。

1. 基础SDK

• 开发语言： 与常规的前端开发语言一样： html/CSS/JS等
• 环境依赖： NodeJS npm cnpm等
• 开发工具： VSCode

2. 搭建开发环境

2.1 Node.js的安装

略过Node.js的安装过程

2.2 安装VSCode

略过安装过程

2.3 安装cnpm

第一步：使用VSCode打开文件夹，使用快捷键Ctrl+ `来打开编辑器自带的终端。
第二步：输入命令，安装cnpm的淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

第三步：之后就可以在环境中直接使用cnpm代替npm命令

2.4 安装vue

输入命令安装稳定版本的vue

cnpm install vue

2.5 安装vue-cli

vue-cli是vue开发的脚手架，帮助开发者快速搭建一个模板化的vue工程。其结构所代表的意义网上介绍较多，不再赘述。

安装脚手架的意义

• 脚手架通过webpack搭建开发环境
• 使用ES6语法
• 打包和压缩JS为一个文件
• 项目文件在环境中编译，而不是浏览器
• 页面自动刷新

安装过程直接执行命令

cnpm install --global vue-cli

vue-cli的安装

3. 初始化一个Vue项目

使用脚手架可以方便的创建vue工程。从起步开始，可以快捷的进行vue工程的创建。

第一步： 执行命令，创建一个vue模板工程。

vue init webpack my-project

创建之前会不断在终端发出配置的询问，按照提示输入自己的配置即可简单定制。

Vue项目的配置过程

第二步： 执行命令，启动项目

cd my-project
npm run dev

此时访问浏览器的http://localhost:8080即可预览模板工程视图。

说明

1. vue-cli帮我们建立的模板工程文件结构明晰，主要操作的部分是src下面的组件部分。
2. 自带了一个helloworld的实例组件

4. Vue文件该怎么看？

使用VSCode打开hello.vue文件的时候，会提示让你安装Vetur插件，安装插件后，能够很好地适配Vue的开发。

每个Vue文件可以分为三个功能部分。主要是：

• 模板：html部分
• 行为：逻辑的处理(script代码)
• 样式：CSS部分

项目中文件的生效顺序
index.html → main.js → App.vue