六、vue-cli

一、安装

Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。

Node.js 官网

Vue Cli 官网

• 安装

npm i -g @vue/cli

• 注：如果需要指定版本，可以使用npm i -g @vue/cli@版本号进行安装

• 安装成功后，检查

vue --version
# 简写：vue -V

• 卸载

npm uninstall -g @vue/cli

二、创建项目

1、vue-cli2初始化项目

vue init webpack 文件夹名称

# Project name 项目名称（回车，项目名称默认与文件夹名字相同）
# Project description（项目描述）
# Author（作者）
# Vue build（选择Runtime + Compiler或者Runtime-only）
# Install vue-router? (Y/n)（是否选择路由）
# Use ESLint to Lint your code?(Y/n)（是否选用ESLint，选用后再选择一个规范）
# Set up unit tests(Y/n)（是否建立单元测试）
# Setup e2e tests with Nightwatch?(Y/n)（是否建立依赖Nightwatch端到端测试）
# 选择用npm还是yarn

项目中build和config文件夹都是webpack配置文件

2、vue-cli3.x以上版本初始化项目

vue create 项目名称

例：

• 创建项目

vue create myproject

选择Manually select features（手动选择特性）

 

• 根据项目选择预设功能

• 选择vue版本

• 路由模式选择（hash还是history）

• css预处理器选择

• ESLint选择

• ESLint选择额外特征

• 选择独立配置文件

• 是否保存当前预设到以后项目

• 项目创建成功

• 目录结构介绍

  • .git（git仓库）

  • node_modules（安装的包）

  • public（页面模板）

  • src（写代码）

    • assets（静态资源）

    • components（自定义组件）

    • router（路由）

    • store（状态管理）

    • views（页面）

  • .browserslistrc（浏览器说明文件）

  • .eslintrc.js（js规范文件）

  • .gitignore（git忽略文件）

  • babel.config.js（babel配置文件）

根据需要在根目录自行添加配置文件：vue.config.js