今天看啥  ›  专栏  ›  貓咪是大王

vue 项目创建 (使用vue-cli3脚手架)

貓咪是大王  · 简书  ·  · 2019-07-04 23:07

1.创建项目之前 可以先安装vue-cli3脚手架 npm install -g @vue/cli

安装vue-cli3脚手架

如果不放心 可以 vue -V 查看安装是否成功

查看版本

2.创建项目 vue create project (这里我选择的是默认设置,文件也比较简单,一般项目中应该选择manually select features 我在下面的【补充】中有介绍)

创建项目

3.按提示运行项目 npm run serve

项目运行
得到网址

4.在浏览器中打开

在浏览器打开

【补充】

  • 1、使用视图界面创建项目 vue ui
    运行vue ui
浏览器打开
  • 2、设置自动打开



  • 3、这里创建的项目比较简单,很多文件比如像 router 也没有,这是因为再开始的时候没有选择 manually select features (手动选择功能,我也是呼呼呼的就回车了,哈哈哈,结果忘了选择)

功能选项:按空格键 选中 和 不选中 (试了好一会才发现是这样的啊,哈哈哈)


功能选项

是否设置路由为history模式

这里是询问怎么存放babel,postcss,eslint等的配置文件

是否保存此次配置

【全选】

我们再来试试全选的情况
将所有选项都选择上:

1.是否使用 class 风格的组件语法?


如果选择 y ,脚手架就会帮我们安装以下组件
vue-class-component
vue-property-decorator

2.是否使用 Babel TypeScript 做转义?(如果想使用JavaScript编辑,在安装选项时不要选择TypeScript)
3.这个是是否设置路由为 history 模式
4.选择一种CSS预处理 (如果安装 Sass/Scss ,本地需要预先安装 python
5.选择一种 TypeScript 格式化校验规则
6.选择校验的时机

Lint on save 保存的时候校验
Lint and fix on commit 提交的时候校验

7.选择一种单元测试方案
8.选择一种E2E(端对端)测试方案(只在 Chrome 浏览器上测试)
9.这里是询问怎么存放 babel,postcss,eslint 等的配置文件

In dedicated config files 单独存放
In package.json 集成在 package.json

10.是否保存为 preset (预设项,以后可以使用的,就不用像这样再一步一步来)
11.给预置项起个名字

下次打开的时候就能看到你之前保存的预设项了


下次运行项目时

参考网站 https://www.jianshu.com/p/fe331c42570f
https://www.cnblogs.com/adhehe/p/10184851.html

文档地址: https://cli.vuejs.org/zh/guide/cli-service.html




原文地址:访问原文地址
快照地址: 访问文章快照