1.下面，讨论通过 vue create 项目名称创建项目，并且自选功能。

首先，终端中执行 vue create 项目名称创建一个项目，回车：

2.对于ESLint代码检查，不同的标准，要求也不一样。选择如上图所示的标准，代码检查非常严格，建议选择具体都有哪些要求呢，列举一些：
● 一个变量，创建后从未更改，则必须使用 const 声明
● 一个文件中，导入（import）代码必须放到一起，中间不能夹杂其他代码
● 代码中间，最多只能有一个空白行
● 每个文件结尾必须有一个空白行
● 每行代码结束，不能使用分号
● 字符串必须使用单引号
● ......
不过没有关系，把vscode插件配置好，保存时，会自动将代码调整成符合要求的

3.最后存为预设之后，当你下次再执行 vue create 项目名的时候，就可以直接使用这个保存的预设了。如下图：

4.如果要删除预设，则需要找到 C:/Users/你的用户名/.vuerc，将里面的预设删除。

如果是Mac系统，则到你的个人文件夹（画小房子图标），按Command+Shift+.，查看隐藏文件，找到 .vuerc自行里面的预设即可。

5. 清空初始的项目

● App.vue，只留下基础的模板即可

● 删除 components 里面的 HelloWorld.vue 组件

● 删除 views 里面的两个组件

● 重置路由（router/index.js）

import Vue from 'vue'
  import VueRouter from 'vue-router'
  // ----------------------------------------------- 去掉加载 Home 这行
  Vue.use(VueRouter)
  const routes = [] // ---------------------------- 清空这个数组
  const router = new VueRouter({
  routes
  })
  export default router

8.项目的目录结构

node_modules --- 我们下载的第三方包（不能动）
public --- 存放项目的首页（不能动）
src --- 我们编码的位置
assets --- 存储项目的资源（图片等等）
components --- 存储组件的（不受路由控制，一般放一下通用的、封装好的组件）
views --- 存储组件的（受路由控制的组件，放到这里）
router --- 配置文件的文件
store --- vuex的配置
App.vue --- 项目的根组件（其他所有组件都是它的孩子）
main.js --- 它是打包的入口文件（main.js是最先执行的文件）
.eslintrc.js --- ESLint的配置文件
.gitignore --- git的忽略文件（已经写好，不需要处理了）
babel.config.js --- babel是对JS进行降价处理的（目前的项目不需要处理的）
package-lock.json --- 锁定第三方包的版本的文件（不需要动）
package.json --- 项目的配置文件

ESLint配置

ESLint默认的配置：
● 变量没有修改，必须用const声明
● 所有的导入必须放到最开头
● 字符串用单引号
● 语句结束，不加分号

● 函数小括号前是否加空格，默认要加

● 找到项目中的 .eslintrc.js ，在 rules 中加入如下的配置项

为了写代码方便，我曾经安装过一个 Prettier插件。

这个格式化插件，和ESLint默认的配置有一点是冲突的（函数小括号前，是否加空格）。

● ESLint要求，所有的函数小括号前，必须加空格。

● Prettier插件，格式化后，会把对象中的方法和小括号之间的空格去掉。

在 .eslintrc.js 文件（ESLint的配置文件）中，找到rules（规则），加入如下的配置：

// 修正函数名和小括号之间的空格问题
  // 参考文档：https://eslint.bootcss.com/docs/rules/space-before-function-paren
  'space-before-function-paren': [
  'error',
  {
  anonymous: 'always', // 匿名函数小括号前，需要空格。比如 setTimeout(function () {})
  named: 'never', // 有名字的方法，不需要空格。比如 abc() {}
  asyncArrow: 'always' // 箭头函数，需要空格
  }
  ]

或者加入这两行代码

'space-before-function-paren': 0,

'no-multiple-empty-lines': 0

自选功能创建项目（vue2）相关推荐

脚手架创建项目vue2.0
脚手架创建项目vue2.0 下载: npm i - g vue npm i - g vue-cli npm i -g webpack 检测下载版本 vue -V webpack -V 初始化项目 vu ...
Vue2脚手架创建项目
Vue2脚手架创建项目一.使用脚手架 1.安装 @vue/cli 简述 cli ===> command line interface (命令行接口) // 安装npm install - ...
Vue2.x ui 创建项目
目录工具安装: node.js 环境准备: 淘宝镜像 - 升级node.js - 升级Vue CLl 脚手架镜像准备(注意:下面的都是cmd窗口的命令,不是zip下载包) Vue2.x UI 界 ...
vue2使用vue-cli创建项目
1.安装vue脚手架 npm install -g @vue/cli 2.创建项目执行命令 vue create 项目名称 3.选择预设也可以选默认配置 4.选择项目功能也可根据需要后期自己安装 ...
视频编辑器-MovieMator简洁使用-功能和快速入门-创建项目、导入和导出
视频编辑器-MovieMator 简洁使用-创建项目.导入和导出 MovieMator是一个简单但功能强大的免费视频编辑软件.它不仅允许用户进行基本的编辑工作,如修剪.裁剪.分割.旋 ...
从头到尾创建一个vue2项目
一.首先你需要有node环境下载地址:https://nodejs.org/en/ 安装过程--详细步骤二.安装vue的脚手架安装工具只须要安装一次即可. vue是个框架, vue-cli是vu ...
用VUE创建一个小型网上商店（一、创建项目）
一.开始一个VUE项目之前 1. 开始之前先了解一下VUE相关的概念性的东西吧 Vue.js 官方文档上这样介绍:简单小巧的核心,渐进式技术栈.它提供了Web开发中常见的高级功能,如: 解耦视图与数据 ...
如何在Leangoo中，为企业创建项目
Leangoo(中文名:领歌)是一款基于看板的项目协作工具. 我们可以使用 Leangoo 可视化地进行项目需求.任务.问题和文档的管理和协作,随时随地跟踪团队工作进展.Leangoo 工具的设计融入 ...
升级vue-cli为 cli3 并创建项目
一.升级npm install -g @vue/cli 二.创建项目 1.vue create vue3-project 下面会提示让你配置下自己想要用到的功能,然后它会自动帮你安装,这个看自己需求 ...

自选功能创建项目（vue2）

1.下面，讨论通过 vue create 项目名称创建项目，并且自选功能。

3.最后存为预设之后，当你下次再执行 vue create 项目名的时候，就可以直接使用这个保存的预设了。如下图：

4.如果要删除预设，则需要找到 C:/Users/你的用户名/.vuerc，将里面的预设删除。

5. 清空初始的项目

8.项目的目录结构

ESLint配置

自选功能创建项目（vue2）相关推荐

最新文章

热门文章

自选功能创建项目（vue2）

1.下面，讨论通过 vue create 项目名称创建项目，并且自选功能。

3.最后存为预设之后，当你下次再执行 vue create 项目名的时候，就可以直接使用这个保存的预设了。 如下图：

4.如果要删除预设，则需要找到 C:/Users/你的用户名/.vuerc，将里面的预设删除。

5. 清空初始的项目

8.项目的目录结构

ESLint配置

自选功能创建项目（vue2）相关推荐

最新文章

热门文章

3.最后存为预设之后，当你下次再执行 vue create 项目名的时候，就可以直接使用这个保存的预设了。如下图：