vue cli4.0 快速搭建项目

一、图形面板搭建

1.安装 node.js

npm -v    查看npm版本

node -v    查看node版本

2.安装 vue cli

npm install -g @vue/cli     安装

vue -V     查看版本

3.接下来我们就可以在自己的电脑里创建项目，在你要创建项目的目录下打开cmd

打开窗口之后运行    vue ui     命令

4. 此时就会打开ui图形界面，点击在此处创建新项目

5.首先填写项目的名字，在填写初始会git默认注释

6. 选择手动配置

7. 选择功能，以下是所有功能介绍

序号	选项	描述
1	Choose Vue version	选择Vue版本
2	Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5
3	TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
5	Router	路由
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
8	Linter / Formatter	格式化程序
9	Unit Testing	单元测试
10	E2E Testing	E2E Testing

 

8.配置选项：

1. 默认vue 2.0

2. 是否开启History模式（不开启）

3. css预处理器 （Sass/SCSS (with node-sass)）

4. 代码验证风格（ESLint + Standard config）

5. 什么时候进行代码规则检测（默认即可）

9.点击创建项目，会弹出是否存为预设，输入预设的名字，然后点击 保存预设并创建项目 即创建完毕

（下次创建vue项目的时候就可以用这套配置快速创建了！）

10、创建完毕后会进入到项目操作界面

插件（项目用到的插件可以在这里安装）

依赖（项目的依赖工具）

配置（那就是配置了）

任务（可以运行项目、打包项目等）

11、启动项目

选择任务  >  server  >   运行  > 完成后点击启动app就弹出预览项目了

 

 

 

 

二、命令行搭建

1.安装 node.js

npm -v 查看版本

2.安装 vue cli

npm install -g @vue/cli   //安装

vue -V //查看版本

3.  cd 进入要创建显目的盘，然后运行

vue create project-one // project-one 项目名称

4.这里选择手动配置

5. 选择你需要的配置项

通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选

一般选择：Babel，Router，Vuex，Linter / Formatter，选完之后按 Enter。分别选择每个对应功能的具体包。

6. 选择是否使用history router

 Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

• 我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来
• 选yes的话需要服务器那边再进行设置

7.选择css 预处理器

我这里不使用，根据你想要的选择就好了

8.选择Eslint代码验证规则

选择 ESLint + Standard config

9.选择什么时候进行代码规则检测（默认即可）

(*) Lint on save // 保存时检测 
( ) Lint and fix on commit // 保存时检测和修改

10.选择如何存放配置（默认即可）

  In dedicated config files // 独立文件放置
  In package.json // 放package.json里

11.是否保存当前配置

N不记录，如果键入Y需要输入保存名字，以后在创建时就用这套配置方案快速创建vue

12.等待创建项目

13.执行它给出的命令，可以直接访问了

 

 

14. 文件目录介绍

 

1. node_modules  存放第三方依赖

2. public 存放静态文件夹 

  2.1 favicon.ico  是网站图标 

  2.2 index.html  页面入口文件

3. src 存放源码文件夹

  3.1 assets 存放图片，css

  3.2 components 存放组件

  3.3 views 存放视图组件

  3.4 router 存放路由配置

  3.5 store 存放 vuex 配置

  3.6 plugins 存放插件配置

  3.7 App.vue  根组件 

  3.8 main.js  入口js 

4.browserslistrc 配置使用CSS兼容性插件的使用范围

5. .eslintrc.js  ESlint配置

6. .gitignore   指定文件无需提交到git上 

7. balel.config.js   使用一些预设 

8. package.json   项目描述及依赖 

9. package-lock.json  版本管理使用的文件

10.  .editorco 配置文件,规范编辑器的配置

11 vue.config.js  webpack配置文件