Vue-cli的学习记录

一、vue-cli的安装

1、通过npm全局安装vue-cli：

npm install -g vue-cli

2、初始化项目：

//vue init webpack <项目名>
vue init webpack vcli
//除了 vue-router的安装选择yes，别的都选择no
//Should we run `npm install` for you after the project has been created? (recommended)
//选择第三个：No, I will handle that myself

3、进入项目目录

//cd <项目名>
cd vcli

4、安装模块 ①先安装一个较小的模块，比方说jquery：

npm install jquery

②将生成的node_modules排除：phpstorm中在node_modules上右击选择Mark directory as,然后选择excluded（不然开发工具可能会卡死）
③再安装package.json里所有的模块：

npm install

5、运行项目

npm run dev

在浏览器输入命令行里生成的网址，出现如下的界面则表示vue-cli安装完成了：

二、项目打包上线

通过如下命令可以将我们开发好的项目打包：

npm run build

打包完成后，会在项目的根目录下生成dist文件夹，里面包括一个index.html和static文件夹，这两者需要我们上传到服务器中，配置好网站的相关数据，之后就可以通过我们设定的域名来访问该项目

三、vue-cli目录结构

1、build

由于我们使用的是webpack生成的项目，所以build目录放的是webpack相关的配置文件，因为目前不会webpack，暂且就先不动里面的东西

2、config

config目录里主要放的就是项目相关的配置
①dev.env.js是与开发相关的配置
②index.js是项目的主要配置，（文件里port值为监听的端口号，autoOpenBrowser为是否自动打开浏览器，index为打包生成的index.html所在的路径，assetsRoot为打包所在的目录）

3、node_modules

该目录里放的是项目所有的依赖文件，一开始用npm install安装的所有的文件都在这里

4、src

项目的核心，这里是我们写代码的地方
①assets 放静态资源的地方
②components 放各种组件的地方
③router 配置路由的地方
④App.vue 项目的根组件，会被渲染到项目根目录里的index.html中，一些公共的样式也可以写在里面
⑤main.js 入口文件，引入了vue，根组件App，路由

5、static

该目录下放的是静态资源（图片等）

6、.babelrc

babel编译时的参数

7、.editorconfig

代码格式的相关配置

8、.gitignore

git上传时需要忽略的文件的配置

9、.postcssrc.js

转换css的工具

10、index.html

主页

11、package.json

项目的基本信息

12、README.md

项目的说明文档

四、主要文件的解读

1、index.html

项目的主页，通过url访问项目时默认的访问页面，文件里只定义了一个空的根节点，在生成的页面中，右击查看网页的源代码，会发现比我们在index.html中写的内容多了

<script type="text/javascript" src="[/app.js](http://localhost:8080/app.js)"></script>

，这是项目编译自动帮我们生成的，这时候，我们看项目的入口文件main.js

2、main.js

1、用import导入文件时，①如果from后面的不是一个路径，（例‘vue’)，就会到项目里的node_modules里寻找vue文件 ②如果from后面是一个路径 （例‘./App’），就会到当前目录下（即src），寻找App.vue文件，如果找不到（例‘./router’），就会到当前目录下寻找router文件夹，如果还找不到，就会报错
2、这里加载的组件名以及模块的名字即components和template之后的名字，会根据导入根组件时命名的名字来决定，打个比方：

import TApp from './App'

，命名为TApp,那么接下来components和template使用的名字都得改为TApp,即：

components: { TApp }

,

template: '<TApp/>'

3、这里的template会将组件模块里的内容放到index.html中id为app的标签中

3、App.vue

.vue文件就是一个组件文件，文件内分为三块内容，①以template标签包裹的组件模块，如果模块里有router-view，那么展示的将是该组件下的子组件的内容
②以script标签包裹的导出的组件对象，在这里面可以写数据data，生命周期（mounted等钩子函数），方法methods等等
③以style标签包裹的css样式，默认时影响全局的，即该组件文件写的样式也会影响到别的组件文件里写的内容，如果只想让style里写的样式只在该组件下起作用，那么要在style后面加上scoped，即

<style scoped></style>

4、router文件下的index.js

该文件就是路由的相关配置，先导入的是路由框架，然后再导入路由插件vue-router，（因为vue-router是依赖于路由框架的，所以要先导入路由框架），在导入插件之后，一定要使用Vue.use，代表要使用该插件了，这里就是

Vue.use(Router)

，之后导入的就是各种各样的组件，例

import HelloWorld from '@/components/HelloWorld'

@符表示的就是src文件夹，所以这里导入的就是src文件夹下的components文件夹里的名为HelloWorld的组件，

path: '/',
name: 'HelloWorld',
component: HelloWorld,

再往下就是定义路由规则，这里定义了一个路径为’/’的路由，对应的组件是HelloWorld组件，该组件会在根组件App.vue中的router-view中渲染

注

如果在路由规则中使用了components，那么就需要给相应的router-view加上name属性

阅读更多