vue全家桶 ---建立一个新的vue项目

本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es六、git等相关知识。

一、前提基础

• vue.js有著名的全家桶系列，包含了vue-router、vuex、axios，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。
• 学习本文以前须要掌握基本的js、css、html基础知识
• node.js、git、webpack基础知识
• 对vue.js、vuex等有基本的了解
• vue官网：cn.vuejs.org/v2/guide/
• vue-router官网：router.vuejs.org/zh/

二、开发环境

1. 安装node.js,直接去官网下载安装包便可：nodejs.org/en/，安装完成之后能够打开cmd/git,经过node -v/npm -v 查看版本。

   

2. 安装webpack, 经过npm install -g webpack全局安装。
3. 安装git(用于代码管理)，直接百度下载安装包便可

三、开始开发

1. 这里咱们采用vue-cli搭建一个新的项目，因此须要先安装脚手架 npm install --g vue-cli。
2. 初始化一个项目：vue init webpack vue_demo_project，由于要用到vue-router,全部这里选择安装vue-router，建议安装ESlint，有助于养成良好的编程习惯。

   

3. 安装依赖：cd vue_demo_project, npm install (若是安装速度较慢，可使用cnpm安装，npm install -g cnpm --registry=https://registry.npm.taobao.org)。
4. 在编辑器中打开项目，在根目录下运行npm run dev。默认是8080 端口，能够在config里的index.js修改。

   

   ps：建议将build 里的assetsPublicPath的路径前缀修改成 ' ./ '，由于打包以后，外部引入 js 和 css 文件时，若是路径以 ' / ' 开头，在本地是没法找到对应文件的（服务器上没问题）。因此若是须要在本地打开打包后的文件，就得修改文件路径。

四、到这里咱们已经成功的建立一个新的vue项目。