vue项目详解(1)-项目搭建

### vue项目搭建的基本环境

1：安装node.js
首先电脑需要安装node.js，安装node.js会自带npm;查看node和npm的安装版本，

如果安装了可输入：node -v   和  npm -v;可以查看当前安装版本的版本号；

弹出版本号，则说明已安装， 

2:下载淘宝镜像 cnpm；

上面我们下载的是npm包管理工具；但是由于npm服务器是在国外的，而在国内下载有时速度会很慢很慢，所以阿里巴巴免费在国内搭建了一个cnpm库。同步频率目前为 10分钟 一次，以保证尽量与官方服务同步

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

如果安装了可输入：cnpm -v 可查看当前版本号

3：安装webpack

因为要搭建的事vue+webpack项目，所以需要先下载webpack;

输入：npm install webpack -g

如果安装了可输入webpack -v 查看版本号

4：安装vue-cli脚手架搭建工具： 

输入：npm install vue-cli -g

如果安装了可输入：vue -V  查看当前版本号 

至此，确保上面的依赖已经安装完成了； 接下来需要找到一个文件夹。来搭建vue项目了；

### vue-cle脚手架构建项目；

1：打开我们需要创建项目的文件夹，打开git管理工具。

 

2： 用vue-cli搭建项目

输入：vue init webpack ‘项目名称’

注意：项目名称根据我们的项目来定义，但不能用中文和大写字母

也可以自己在这里输入项目名称，但是个人不太习惯；

 输入：vue init webpack vue-basic-building

 中间会让我们输入名称或者提示，以及一些依赖的选择，可以直接回车选择默认选项，然后选择（Y/N）的可以根据自己需求选择，建议除了eslint检测可以选择no其他的都选择yes；

至此，项目已经搭建完成；

cd进入工程目录：cd  '项目名称'

下载项目依赖(个人习惯cnpm)： cnpm install  

运行项目：npm run dev

然后浏览器打开运行的网址， 

如图所示：一个基本的vue项目已经搭建完成基本目录结构如下：

一个基本的项目已经搭建完成。那么项目结构是怎么样的？我们应该对项目进行哪些初始化。 关于axios封装，反向代理，vuex存储传值，路由跳转，路由守卫等怎么实现，后续更新

生活很难，分享不易；

盼君赏赞，江湖再见；