创建vue项目(一)搭建vue-cli 项目文件介绍 简单配置

记录一下

拉取项目时 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 的内容

最终效果：

下一篇