vue（五）——vue-cli即vue脚手架

摘要

        原本我是想先整理vue组件的，但是想想还是先整理一下vue-cli然后初始化vue项目后再整理组件的知识点更容易了解。

1、什么事vue-cli

        简单来说就是用来搭建vue项目的架子。就相当于生活中我们看到的装灯的时候要先搬个梯子，刷墙的时候要先搭好架子，这也是一样的道理。

2、全局安装vue-cli

安装vue-cli可以直接使用npm来安装。

npm isntall -g vue-cli

3.初始化创建项目

由于我电脑上使用的还是vue2的版本，所以我创建和运行项目用到的命令是：

1、创建项目
vue init webpack 项目名称

2、运行项目
npm run dev

创建项目：

设置参数说明：

2.1、参数设置说明：
Generate project in current directory：是否在当前目录下生成项目
Project name 项目名称
Project description 项目描述
Author ：作者
下面的都是选择部分
Vue build ：选 Runtime + Compiler: recommended for most users 运行加编译(推荐大部分人使用)；
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。官网:http://eslint.org/
Pick an ESLint preset (Use arrow keys) :选择编写vue项目时的代码风格，根据个人爱好选择：
Standard (https://github.com/feross/standard)
AirBNB (https://github.com/airbnb/javascript)
none 自己定义风格
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试

vue3的版本则使用：

1、创建项目
vue create 项目名称

2、运行项目
npm run serve

4、运行项目

创建项目后会有运行项目的提示

1、在命令台进入项目目录

2、运行npm run dev命令

3、编译后点击或者在浏览器输入显示的链接

 

 5、目录结构

 

1. build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
2. config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3. dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
4. node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
5. src: 存放项目源码及需要引用的资源文件。
6. src下assets：存放项目中需要用到的资源文件，css、js、images等。
7. src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
8. src下emit：自己配置的vue集中式事件管理机制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：自己配置的vue请求后台接口方法。
11. src下page：存在vue页面组件的文件夹。
12. src下util：存放vue开发过程中一些公共的.js方法。
13. src下vuex：存放 vuex 为vue专门开发的状态管理器。
14. src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。
17. package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。