【一】Vue-CLI 项目搭建
【二】Vue-CLI 项目搭建参考步骤
- Vue-CLI（Vue Command Line Interface）是Vue.js官方提供的一个基于命令行的快速搭建Vue项目的工具。
- 它为我们创建一个Vue项目提供了简单易用的脚手架。
【1】安装Node.js：
-
首先需要安装Node.js，因为Vue-CLI是基于Node.js运行的。
-
你可以去Node.js官网下载和安装适合你操作系统的Node.js版本。
【2】安装Vue-CLI：
- 一旦安装了Node.js，就可以使用npm（Node.js包管理工具）来全局安装Vue-CLI。
- 在命令行中运行以下命令进行安装：
npm install -g @vue/cli
【3】创建一个Vue项目：
- 安装完成后，可以使用Vue-CLI创建一个新的Vue项目。在命令行中运行以下命令：
vue create project-name
- 其中，
project-name是你想要的项目名称。
【4】配置项目选项：
- Vue-CLI会提示你选择一些配置选项，如预设类型、特性插件等。根据你的需求进行选择或默认即可。
【5】安装依赖并运行项目：
- 配置完成后，Vue-CLI会自动进行项目的安装依赖过程。安装完成后，在项目目录下运行以下命令启动项目：
cd project-name
npm run serve
- 这样就完成了一个基本的Vue-CLI项目的搭建，现在你可以在浏览器中访问
http://localhost:8080来查看项目。
【三】单文件组件：
【1】详解
- 在Vue.js中，单文件组件是一种以
.vue结尾的文件格式，用于组织Vue组件的代码、模板和样式。 - 它将一个完整的Vue组件包装在一个文件中，提供了更好的可维护性和组件化开发体验。
【2】组成部分
单文件组件通常包含三个部分：template、script和style。
-
template：用于定义组件的HTML结构，可以使用Vue的模板语法编写。 -
script：用于定义组件的JavaScript代码，包括组件的逻辑和行为。可以使用ES6模块导出一个Vue组件。 -
style：用于定义组件的样式，支持CSS、SCSS等预处理器。
【3】单文件组件示例：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style>
h1 {
color: red;
}
</style>
- 要在Vue项目中使用单文件组件，可以直接通过
import导入组件，并在其他Vue组件中通过标签名来使用它。
【四】相关的开发者文档链接：
【五】Vue-CLI 项目搭建
【1】环境搭建
- 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架
cnpm install -g @vue/cli
- 清空缓存处理
npm cache clean --force
【2】项目的创建
（1）创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
//标准eslint，自动修复（ESlint+Standard config--》lint on save+Lint and fix on commit）
vue ui 使用图形界面创建项目
（2）启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录
（3）打包项目
npm run build
// 要在项目根目录下进行打包操作
（4）package.json中
"scripts": {
"serve": "vue-cli-service serve", # 运行项目
"build": "vue-cli-service build", # 编译项目成html，css，js
"lint": "vue-cli-service lint" # 代码格式化
},
【3】认识项目
（1）项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
--favicon.ico
--index.html:项目入口页面，单页面
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）
（2）配置文件：vue.config.js
//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
（3）main.js 整个项目入口文件
//es6 模块导入规范，等同于python导包
//commonJs的导入规范：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue' //根组件
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
/*
new Vue({
el:'#app' //原来是用el:'#app'，现在是new出Vue对象，挂载到#app上---》.$mount('#app')
render: h => h(App) //原来是在页面上div中写样式，现在组件化开发 把根组件（import App from './App.vue'），通过render渲染上，渲染组件的方式
}).$mount('#app')
*/
（4）vue文件
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
//export default-->es6的默认导出（导出一个对象），模拟commonJS的导出方式制定的
export default {
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
（5）定义组件
#1 新建xx.vue
components-->HelloWorld.vue
#2 引入使用
<script>
# es6的引入import from
import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'
Vue.component('HelloWorld',HelloWorld) # 全局组件
export default {
components: { # 局部组件
HelloWorld:HelloWorld
},
}
</script>
【六】ESLint
- ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。
- 代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。
- 对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
- JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。
- 因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。
- 像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
- ESLint 的初衷是为了让程序员可以创建自己的检测规则。
- ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。
- 为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。
- ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装
js语法规范性检查，类似于PEP8规范 - 官网：https://eslint.bootcss.com/docs/about/
【1】使用vue-cli：
- 在vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
.eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
.eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。执行：npm run lint 会自动修复代码
【2】配置ESLint：
- Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种，可以像安装其他插件一样在命令行用npm install eslint -g安装，也可以修改package.json文件去更新项目的依赖包，重新跑一遍npm install就可以了。
- eslint常用的依赖有很多，我贴出我用的一些。在package.jsonde 的dependencies或者devDependencies中添加下列属性即可：
"babel-eslint": "^7.1.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
- 但是有可能项目没有生成 eslintrc.js，码友可以去网上搜eslintrc.js然后放在项目根目录下即可。
【3】vue项目中关闭ESLint
- 时候会被ESLint的报错阻止程序的运行，这时候我们就想关闭这个ESLint了。在vue项目中关闭ESLint方法：
- 在您的Vue项目的根目录中，找到一个名为
.eslintrc.js或.eslintrc的文件。 - 打开该文件，并查找类似于以下代码的配置：
module.exports = {
// ...
rules: {
// ...
}
}
- 要关闭ESLint，请删除或注释掉整个
rules部分的代码。如果没有其他配置，也可以将整个.eslintrc.js文件删除。
示例：
module.exports = {
// ...
// rules: {
// // ...
// }
}
- 保存文件并重新启动您的Vue开发服务器。
这样，ESLint将不再执行任何代码规范检查，并且不会抛出任何与代码规范相关的错误或警告。
- 请注意，关闭ESLint可能会导致代码质量下降，因为您将无法受益于代码规范的自动化检查和修复功能。
- 所以，在关闭ESLint之前，请确保了解潜在的风险并做出明智的决策。
【4】配置示例
- 在package.json中通过eslintConfig配置，示例：
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {
"eol-last": [0],
"semi": [2, "always"], // 强制语句分号结尾
"indent": [2, 4], // 强制缩进4 spaces
"no-new": [0], // 不允许new一个实例后不赋值或不比较
"no-debugger": [0], // 不允许出现debugger语句
"camelcase": [0, {"properties": "never"}] // 关闭驼峰命名规则
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"eslintIgnore": [
"dist/*",
"node_modules/*",
"build/*",
"*.md"
],