一:安裝node環境
1.下載地址:https://nodejs.org/zh-cn/download/
2.檢查是否安裝成功:node -v
二:全局安裝vue cli3
提示(可以安裝淘寶鏡像):npm install -g cnpm –registry=https://registry.npm.taobao.org
1.安裝命令:npm install -g @vue/cli
2.卸載命令:npm uninstall vue-cli -g
3.查看是否安裝成功:vue -V || vue --version
三:創建vue項目
1.vue create 項目名稱
2. Default ([Vue 2] babel, eslint) vue2默認配置
Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue3默認配置
Manually select features 手動配置
3. ( ) Choose Vue version->選擇版本
(*) Babel->編譯
( ) TypeScript->是否支持TypeScript
( ) Progressive Web App (PWA) Support->是否支持pwa
( ) Router->vue路由
( ) Vuex->vue狀態管理
( ) CSS Pre-processors->css 預處理器
(*) Linter / Formatter->代碼規範檢測
( ) Unit Testing->單元測試
( ) E2E Testing->端到端測試
3. Use history mode for router?->是否使用路由的history模式
4. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
如果上面選擇了Css預處理器選項就會讓選這個
5. Where do you prefer placing config for Babel, ESLint, etc.? 是否需要將你的配置分開
6. Save this as a preset for future projects? 將以上的配置保存爲一個默認配置
7. 創建完成進入創建好的目錄直接->npm run serve 啓動項目
四:項目目錄
1.node_modules->依賴包目錄
2.public->靜態資源目錄
3.src->代碼目錄
4.browserslistrc->瀏覽器相關支持
5.gitignore->提交git時忽略的文件
6.babel.config.js->es語法轉換
7.package.json->項目基本信息
8.package-lock.json->模塊與模塊之間的版本依賴關係
9.README.md->項目介紹