vue-cli个人学习

1、vue-cli项目结构介绍

  vue-cli项目结构如下图：

README.md：介绍项目安装、运行、打包、测试等操作的npm命令；
package-lock.json：改文件没什么用，可删除；
package.json：改文件包含整个项目的一些配置信息，具体内容如下：

{
  "name": "vuecli-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

  scripts中记录运行和打包的标签，运行项目时输入：npm run serve，如果将serve改成start，则运行时输入：npm start（只有start可以这样操作）；
  dependencies和devDependencies记录项目中的插件；
public文件夹：包含logo和入口index.html；
components文件夹：该文件夹主要放开发出的组件；
APP.vue：父组件；
main.js：项目入口函数；
babel.config.js：es6语法配置；

2、组件嵌套

（1）定义全局组件

1. 开发好对应组件，如HelloWorld.vue
2. 在main.js函数中导入组件

import HelloWorld from './components/HelloWorld'

3. 注册组件

Vue.component(HelloWorld.name,HelloWorld)

注：全局组件一旦修改一个地方会导致所有地方出问题，所以一般不会用全局组件；

（2）定义局部组件

1. 开发对应组件；
2. 在使用的地方导入组件
   如要在App组件中使用HelloWorld组件，就要在App.vue中导入HelloWorld组件；

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',
  components: {
  }
}
</script>

3. 注册组件

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',
  components: {
  	HelloWorld
  //"helloWorld":HelloWorld
  }
}
</script>

3、组件css样式

  在组件中有style标签，直接在标签中写样式会影响所有的组件，如：

<style>
h1{
	color:red
}
</style>

  想要避免上述情况，让组件中写的css仅影响该组件，需要加上scoped，如：

<style scoped>
h1{
	color:red
}
</style>