vue安装和创建新项目以及其结构

安装Vue之前，需要安装npm，npm类似iOS的cocopods, 而npm在node里面，所以直接安装node，就相当于安装了npm。

一：vue安装步骤：

安装VUE教程，我另一篇文章，有介绍npm是什么？如何安装Node.js和npm？
这里做简要介绍。

1，Node.js安装
安装好noedeJS然后继续安装下一步

2、全局安装vue-cli，执行npm install --global vue-cli，这个过程很慢。如果报错，多运行几次。

npm install --global vue-cli

因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。为了提高我们的效率，可以使用淘宝的镜像。

产生通过config命令设置默认下载路径：

npm config set registry https://registry.npm.taobao.org 

即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。也就是：npm = cnpm。

然后再执行：

npm install --global vue-cli

3、安装后，检查是否安装成功

vue -V (在此注意V为大写)

二：创建新项目

1、使用vue建一个项目名叫xxxx（vue init webpack xxxx），注意项目名不能有大写。

注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js中。

image.png

• 1，Project name 工程项目名称
• 2，Project description 工程项目描述
• 3，Author 作者名称

2 、注意：
项目建立过程中，有如下选择，选择NO。
(该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，避免不必要的麻烦)。

后两项为单元测试，可以选择No.

image.png

3、项目建立完成后，目录结构如下：

image.png

4、进入项目目录文件夹（xYVuProject）中，就可以使用vue进行开发啦

5、使用npm run dev，便可以打开本地服务器实时查看效果（http://localhost:8080）

①：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

image.png

建议将端口号改为不常用的端口。如修改端口号8080改为：8081。如下图。
另外我还将 build的路径前缀修改为 ./（原本为/），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 / 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

如果上述①没法做到，那么就不管上面的①，直接进行②进行修改。

②：如图中修改端口号8080改为：8081

image.png

然后，按F5运行项目，项目运行起来去网页上修改端口号8080改为：8081，即可。

image.png

6、初始效果

image.png

三：项目结构：

Vue项目开发的目录结构保持一致，容易理解并方便构建与管理，方便日后的维护和其他同事的阅读。
在初入前端的时候，一个项目中的文件夹会非常多，与Vue官网的简单demo相差非常大，实际开发中会增加很多文件。

1，Vue目录结构

image.png
image.png

2，主要项目目录介绍
①.build目录是webpack主要的配置目录

image.png

其中比较重要是 webpack.base.conf.js
兼容ES6配置

image.png

配置地址常量

image.png

配置自定义loader

image.png

②.config目录是对webpack和node最基础的配置，定义了当前所属环境，监听的端口号，生成静态文件目录位置等

image.png

其中比较重要是index.js
配置node监听端口、静态文件位置，静态文件引用前缀、node代理等

image.png

③js目录是项目开发过程中的自行开发或引用的小型js库

image.png

其中比较重要的是http.js，封装了axios库的常见用法，可以配置统一的request拦截器和response拦截器，其他的有类似日期类库，echarts封装类，vue的mixin库等

4，stylus目录是css预处理语言目录

image.png

主要的样式文件

base --- 基础组件样式
mixin --- 混合函数库
reset --- 重置样式库
variable --- 全局变量声明

5，其他components、router、store目录
这三个目录结构是vue项目开发过程中独有的，分别代表vue组件目录，vue-router配置目录、以及vuex配置目录。

具体规范见
vue组件开发规范
vue-router配置规范
vuex配置规范

6，vue文件结构

image.png