vue——进阶（单文件组件，cli）
一、单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad
# 原来写的组件存在的问题 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel # 以后每个组件就是一个 xx.vue-----最终----->html,css,js 并且还可以使用 webpack 构建工具 # CLI 会为你搞定大多数工具的配置问题
二、Vue-CLI 项目搭建
因为单文件组件太麻烦，就产生了cli
2.1 环境搭建
1 安装node(一路下一步----》node相当于python解释器，npm相当于pip) 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2 安装cnpm(淘宝镜像cnpm，) npm install -g cnpm --registry=https://registry.npm.taobao.org 3 装完以后，本地就有cnpm命令，以后再装模块，就使用cnpm安装 4 安装脚手架 # -g 全局安装 cnpm install -g @vue/cli 5 清空缓存处理 npm cache clean --force
2.2 项目的创建
6 装完以后就会走vue命令 7 通过vue命令创建项目 vue create 项目名（命令行下创建项目） 或 vue ui (图形化界面，点点点创建项目) -点一点就会（bable，eslint） 注意： 新建的这些项目的本质是：cli从git上给你拉了一个空项目（模板），以后再模板上继续写就可以了 # 注意 vue：2.x bable：兼容性相关（es6的语法，自动转成es5兼容浏览器） eslint：语法检查，代码格式化 8 运行项目 npm run serve :在浏览器中访问 9 停止项目 ctrl+c 10 打包项目 npm run build #npm run build 11 使用ide打开编写 用pycharm打开
2.3 认识项目
项目目录
dist: 打包的项目目录(打包后会生成) node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装) public: 共用资源 --favicon.ico --index.html: 项目入口页面，单页面开发 src: 项目目标,书写代码的地方 -- assets:资源，静态图片 -- components:组件（swiper组件...） -- views:视图组件(也是组件) -- App.vue:根组件 -- main.js: 入口js -- router.js: 路由文件 -- store.js: 状态库文件 vue.config.js: 项目配置文件(没有可以自己新建) package.json：项目配置依赖（等同于python项目的reqirement.txt）
#释义：
"scripts": { "serve": "vue-cli-service serve", #相当于 npm run serve 运行项目 "build": "vue-cli-service build", #相当于 npm run build 构建项目---》html，css，js "lint": "vue-cli-service lint" #相当于 npm run lint 格式化代码 }
配置文件：vue.config.js
//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
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')
*/
vue文件
<template> <!-- 模板区域 --> </template> <script> // 逻辑代码区域 // 该语法和script绑定出现 //export default-->es6的默认导出（导出一个对象），模拟commonJS的导出方式制定的 export default { } </script> <style scoped> /* 样式区域 */ /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */ </style>
定义组件
#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>
三、第一个小案例
#浏览器上显示''hello world'' ，并且引用About.js传过来的内容
<template> <div class="hello"> <h1>{{ msg }}</h1> <About></About> </div> </template> <script> // 导入1个组件 import About from './views/About.vue' import Vue from 'vue' // 注册1个全局组件 Vue.component('About', About) export default { name: 'Darker', data () { return { msg: 'Hello World' } } } </script> <style scoped> h1 { font-weight: normal; } </style>
About.js
<template> <div class="about"> <h2>我是About</h2> </div> </template> <script> export default { } </script>
四、关于Vue中装的eslint插件
方式一：直接disabled插件
方式二：右键-->Fix ESLint Problems(直接自动格式化Vue代码)
首先需要装此插件
让后右键点击格式化代码
