创建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 的内容

最终效果：

下一篇

创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置相关推荐

Vue项目脚手架搭建
Vue项目脚手架搭建 Vue 项目脚手架搭建需要的工具安装NodeJs 安装vue-cli 安装webpack 初始化项目启动项目 Vue 项目脚手架搭建需要的工具 NodeJs vue-cli ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
Vue项目从零开始搭建
一.准备环境第一步安装node.js根据实际操作系统选择安装包下载地址:https://nodejs.org/en/download/ Cmd命令行输入 node –v检测安装是否成功第二步 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
Windows之vue-cli安装和vue项目快速搭建
Windows之vue-cli安装和vue项目快速搭建 1.提前安装好node.js, 安装步骤:https://blog.csdn.net/qq_43842093/article/details/1 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
Mac Webpack Vue项目的搭建
文章目录前言一.Node的安装? 二.Webpack的安装三.Vue 的安装四.Vue项目的创建五:运行项目前言由于公司需要对接浙政厅的H5应用平台,为了满足平台的发布要求,自己第一次研 ...
Vue 入门之搭建vue脚手架
系列文章目录第一章 Vue 入门之搭建vue脚手架第二章 Vue入门之项目结构介绍第三章 Vue入门之基本语法第四章 Vue入门之企业站点开发实践第五章 Vue入门之前端部署文章目录系列 ...
vue项目的骨架及常用组件介绍
vue项目基础结构一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...

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

一、搭建vue-cli

二、项目文件介绍

三、简单搭建、配置

创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置相关推荐

最新文章

热门文章