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传过来的内容

App.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代码)

　　首先需要装此插件

 　　让后右键点击格式化代码