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 // 項目說明書