vue项目构建流程

vue项目总流程

一、安装和理解框架里的文件

1.首先，安装vue全局环境：

npm install -g vue-cli

然后在一个项目下建一个比如jsj这样的目录,进入这个目录打开命令行窗口：vue init webpack pro(这个是项目名字)，写完这个命令之后会出现一些命令行让回答y或n，这个时候这样：

如：1) vue-router? Y

​ 2)Lint your code? n(这个是代码检查比较严谨，以后等项目做的完整了就可以把它装上去了)

​ 3)unit tests ? Y

​ 4)e2e tests ..? n

​ 5)Yes,use npm

2.安装好之后：输入这样的命令行

1)cd pro

2)npm run dev(启动项目)

3.启动完项目，会出现一个端口号，直接在浏览器输入端口号就可以了

二、分析目录结构

1.index.html这个文件是单页面应用（SPA）：整个项目里面只有一个html页面，作用：用来加载主视图的一个html主文件。

2.package,json作用：整个项目的主配置文件，包含指令，包含所依赖的一些环境

3.static目录是一个空：主要用来存放静态资源文件，如图片、音视频

4.build文件（打包、建立）：是要把当前的项目工程化，里面是跟打包相关的配置文件。它里面的

1）webpack.base.conf.js是webpack基础配置文件，entry output resolve module(加载器的配置)

2）webpack.dev.conf.js是热更新监听器的一个配置，坚挺的是index.html这个文件

3）webpack.prod.conf.js对插件二次声明的一个配置

4.config目录里面，它本身就是配置的意思，能用到的就是index.js，在这里面管理了主机、域名、端口号、路径的声明

5.src目录里（能够编写代码的目录）：

1）app.vue:

export default {//把单文件组件暴露出去了，有地方是要用它
  name: 'App'
}

2)main.js:管理整个入口文件

import App from './App'  //把声明的组件对象拿过来
import router from './router'//路由规则的对象

6.怎么用？组件写在components,路由规则配置在router里面

注意：所有项目工程化的插件都要以以来的形式装过来：如:

axios:npm i axios --save-dev

哪个组件需要交互，就在哪个组件里倒入axios对象

7.怎样借助第三方动画：要以模块的形式把动画css文件导到主配置文件里面：在src文件里建一个stylesheet目录，里面放进去animate.css文件，然后把这句话放到 main.js里 import './stylesheet/animate.css'

三、移动端的UI框架如何使用

1.去百度官网搜mintui，然后进入UI官网

npm install mint-ui -S把这个命令行输入到终端安装下

然后点击开始使用，点击中文vue2.0，点击左边栏的Quickstart 然后复制这个

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

放到main.js里面就可以使用了