記錄一下
拉取項目時 npm run dev 報錯

輸入：npm rebuild node-sass 再重新 npm run dev
如果不能解決，請看這里

一、搭建vue-cli

vue create 項目名稱 ? Please pick a preset: > default (babel, eslint) //默認 > Manually select features //手動選擇功能

后面還有一個選項，是否做預設：n
如果做了預設，后面不想要了，可以在 C盤下找到“用戶”，然后在搜索框中搜索“.vuerc”，刪掉這個 .vuerc 文件就可以了。如果想保留其中幾個，則需要用編輯器打開，刪除不想要的對象。

二、項目文件介紹

三、簡單搭建、配置

為了以后能更好的管理項目的路由和狀態管理：
第1步： 在 src 文件夾下創建一個 routes 文件夾、 stores 文件夾 ；
第2步： 并將 router.js 和 stroe.js 分別放入對應文件夾內；
第3步： 再將原來的router.js 和 stroe.js 都重命名為 index.js；（原因：若為index.js，引入文件時，腳手架可不引入到index.js這一層，它會自動引入index的js文件）；
第4步： 在 main.js 文件中重新引入 router.js 和 store.js 文件；

改造路由
原路由代碼如下：

采用第二種路由方式
第1步（前期工作）： 刪除 views 文件夾下自帶的的 Home.vue 和 About.vue ,并且在 views 文件夾下創建新的文件夾，用來寫頁面，然后在每個新建的文件夾下新增一個 index.vue 文件。

index.vue

第2步（配置路由）： 為了不讓后期 routers 文件夾下的 index.js 太過復雜，我們在 routers 文件下創建與 views 中一樣名字的文件夾，且每個文件夾下新增一個 index.js；

每個 index.js 文件的代碼如下：

export default {path : '/workOrder',component : () => import('@/views/workOrder') }

第3步： 在routers下的 index.js 中引入

查看是否引入成功： 在地址欄中輸入： /文件夾名稱 ，看是否出現當前文件夾下 index.vue 的內容

最終效果：

下一篇

總結

以上是生活随笔為你收集整理的创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。