搭建Vue项目

一、开发环境

1、安装VScode
下载地址：https://code.visualstudio.com/

（1）安装中文插件
Chinese (Simplified) Language Pack for Visual Studio Code

（2）其它插件
ESLint、Live Server、Node.js Modules Intellisense、Vetur、VueHelper

注意：
设置中开启完整的Emmet语法支持

2、安装Node.js
Node.js 是运行在服务端的 JavaScript。

官网：https://nodejs.org/en/
中文官网：http://nodejs.cn/

# 查看是否安装成功
node -v
# nodejs集成了npm
npm -v

修改npm镜像：
NPM官方的管理的包都是从 http://npmjs.com下载的，速度很慢。推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list

二、脚手架工具Vue-Cli

vue-cli 是一个脚手架,用于快速生成一个 vue 的项目模板

安装vue-cli

cnpm install vue-cli -g
vue list
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack

创建一个基于 webpack 模板的 vue 应用程序:

# 这里的 mytest 是项目名称
vue init webpack mytest

# 初始化并运行
npm install
npm run dev

三、安装vuex、axios、elemnet-ui、sass

1、vuex、axios、elemnet-ui
vuex: 全局状态管理
axios: 前后端通信
element-ui: 基于Vue的桌面端组件库

npm install vuex axios element-ui --save

main.js中添加：

import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(Router)

2、sass
sass-loader依赖于node-sass,所以要安装node-sass

cnpm install node-sass --save-dev    //安装node-sass
cnpm install sass-loader --save-dev   //安装依赖包sass-loader
cnpm install style-loader --save-dev  //安装style-loader

使用sass的地方添加lang=scss

<style lang="scss" >

说明：

• sass-loader
  可以将sass文件编译成css，sass-loader依赖于node-sass，而node-sass依赖于node。所以要注意node-sass和node之间的版本支持。
• style-loader：将 JS 字符串生成为 style 节点、将样式插入到style标签