npm install -g @vue/cli //安装CLI
npm install -g @vue/cli-init //安装桥接工具,拉取CLI旧版本
vue init webpack myproject //CLI2.x版本初始化项目
vue create myproject //CLI3.x以上版本初始化项目
npm run dev //CLI2.x版本运行项目
npm run serve //CLI3.x以上版本运行项目
Vue CLI2.x初始化项目过程:
vue init webpack vuetest
? Project name vuetest1 //项目名
? Project description A Vue.js project //项目描述
? Author CC. //项目作者
? Vue build standalone
? Install vue-router? No //是否使用路由
? Use ESLint to lint your code? No //是否使用Eslint规范代码
? Set up unit tests No //是否使用单元测试
? Setup e2e tests with Nightwatch? No //是否使用端对端测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
Vue CLI2.x目录结构分析:
目录
结构预览
├─build // 保存一些webpack的初始化配置,项目构建
│ ├─build.js // 生产环境构建
│ ├─check-version.js // 检查npm、node版本
│ ├─vue-loader.conf.js // webpack loader配置
│ ├─webpack.base.conf.js// webpack基础配置
│ ├─webpack.dev.conf.js // 开发环境配置,构建本地开发服务器
│ ├─webpack.prod.conf.js// 生产环境的配置
│
├─config // config文件夹保存一些项目初始化的配置
│ ├─dev.env.js // 开发环境的配置
│ ├─index.js // 项目一些配置变量
│ ├─prod.env.js // 生产环境的配置
│
├─dist // 打包后的项目
├─node_modules // 依赖包
│
├─src // 源码目录
│ ├─assets // 静态文件目录
│ ├─components // 组件文件
│ ├─router // 路由
│ ├─App.vue // 是项目入口文件
│ ├─main.js // 是项目的核心文件,入口
├─static // 静态资源目录
├─.babelrc // Babel的配置文件
├─.editorconfig // 代码规范配置文件
├─.gitignore // 配置git忽略文件
├─.postcssrc.js // postcss插件配置文件
├─index.html // 页面入口文件
├─package-lock.json // 项目包管控文件(真实版本)
├─package.json // 项目配置(大致版本)
└─README.md // 项目说明书
在CLI3.x以上版本,与2.x版本差异很大,3.x以上的CLI的设计原则是“零配置”,因此有关webpack的配置文件都被移除,比如build、config,CLI3.x以上版本基于webpack 4打造,且提供了vue ui命令以及可视化配置,另外,CLI3.x版本移除了static文件夹,新增了public文件夹,并将index.html转移到了public文件夹中。CLI4.x版本与3差别不大。
CLI4.x项目目录结构
├─node_modules // 依赖包
├─public // 相当于CLI的static
│ ├─favicon.ico
│ ├─index.html
├─src // 源码目录
│ ├─assets // 静态文件目录
│ ├─components // 组件文件
│ ├─router // 路由
│ ├─App.vue // 是项目入口文件
│ ├─main.js // 是项目的核心文件,入口
├─.broswerslistrc // 浏览器相关配置
├─.babel.config.js // Babel的配置文件
├─.gitignore // 配置git忽略文件
├─package-lock.json // 项目包管控文件(真实版本)
├─package.json // 项目配置(大致版本)
└─README.md // 项目说明书