Vue--脚手架 新手详细安装使用方法

Vue脚手架可以快速生成Vue项目基础的架构
vue/cli 帮助我们更好、更快、更规范的开发vue项目
一、项目开发中有很多重复性的工作

• 安装配置webpack
• 安装vue
• 安装axios
• 创建项目结构
• 安装配置路由

脚手架帮助我们做这些重复性的，技术含量不高的工作，让开发者专注于系统业务逻辑的处理
二、安装
下面的命令安装的时vue-cli 的最新版本，当前最新版版本为 4…3.0

npm install -g @vue/cli

因为4.x 版本出来的时间还不长，所以我们还是使用 3.x 版本

npm i -g @vue/cli@3.11.0

查看版本

vue -V

三、创建项目
基于3.x版本的脚手架创建Vue项目：
使用命令创建Vue项目

vue create my-project

• 选择Manually select features(选择特性以创建项目)

• 勾选特性可以用空格进行勾选。

• 是否选用历史模式的路由：n

• ESLint选择：ESLint + Standard config

• 何时进行ESLint语法校验：Lint on save

• babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)

• 是否保存为模板：n

• 使用哪个工具安装包：npm

安装完成后，进入项目目录，运行

npm run serve

四、基于ui界面创建Vue项目
命令：

vue ui

在自动打开的创建项目网页中配置项目信息
五、基于2.x的旧模板，创建Vue项目

npm install -g @vue/cli-init 
// 创建项目
 vue init webpack my-project

六、目录分析
Vue脚手架生成的项目结构

• node_modules:依赖包目录

• public：静态资源目录

• src：源码目录

• src/assets:资源目录
  src/components：组件目录
  src/views:视图组件目录
  src/App.vue:根组件
  src/main.js:入口js
  src/router.js:路由js

• babel.config.js:babel配置文件

  .eslintrc.js:
  七、Vue脚手架的自定义配置
  通过 package.json 进行配置 [不推荐使用]

"vue":{ "devServer":{ "port":"9990", "open":true } }

通过单独的配置文件进行配置，创建vue.config.js

module.exports = { devServer:{ port:8888, open:true } }

这些就是关于Vue脚手架的基本使用方法了成功安装后的目录是这个样子。