Vue期末项目开发流程(一)

目录

一、项目创建

1.1 创建项目文件夹

1.2 找到项目文件夹 输入cmd 进入小小黑窗，输入“vue create 项目名” 创建项目

1.3 选择一个预设值 我们选择最后一项 Manually select features (自定义)

1.4 选择项目设置 按上下键切换 按空格键选择或取消 选择如下图中四个 然后回车确认

1.5  选择Vue.js版本 这里我们选择2.X

 1.6 选择路由模式 若选择history模式 则输入y, 若选择hash模式则选择n  这里我选择n

 关于history和hash的区别 详见:

1.7 选择CSS预处理器  这里我选择less

1.8 选择设置 的存放路径 In dedicated config files(另存于文件夹) 或者存放于 package.json 文件夹中  这里我选择另存

1.9 询问是否将刚刚的设置方案保存下来,在之后可以快捷设置

 1.10  成功创建项目

1.11  根据提示依次输入: "cd 项目名" 表示进入项目  "npm run serve" 表示运行项目

1.12 在浏览器输入cmd 返回的地址 进入

 二、项目文件介绍

2.1 router文件夹

2.1.1 routers文件的作用

2.1.2 routers文件中的组件的使用

 2.2 views文件夹

2.2.1 views文件夹的作用

---

一、项目创建

1.1 创建项目文件夹

1.2 找到项目文件夹 输入cmd 进入小小黑窗，输入“vue create 项目名” 创建项目

1.3 选择一个预设值

我们选择最后一项 Manually select features (自定义)

1.4 选择项目设置

按上下键切换 按空格键选择或取消 选择如下图中四个 然后回车确认

Babel---将项目中的ES6代码转换成为ES5 去兼容低版本的浏览器

Router---管理项目中的路由

Vuex---管理项目中的共享数据状态

CSS Pre-processors---css预处理器

Linter/Formatter---对项目中的代码进行格式化和格式化校验

1.5  选择Vue.js版本

这里我们选择2.X

 1.6 选择路由模式

若选择history模式 则输入y, 若选择hash模式则选择n 

这里我选择n

 关于history和hash的区别 

URL中的显示方式不同

• hash模式: URL中会出现#符号，如http://example.com/#/about。这种模式不会向服务器发送请求，而是在客户端进行处理。

<