Vue笔记第四天(搭建脚手架)

第四天

1.搭建脚手架-CLI
a.建议使用npm 命令:npm install -g @vue/cli(这是一个全局命令只用安装一次就可以了)
b.命令查看是否成功 vue --version
c.类似于这样的一堆err!安装失败了

解决方案:

1. 更换安装的工具:
   a. 淘宝镜像:
   $ npm install -g cnpm --registry=https://registry.npm.taobao.org
   npm命令：cnpm install -g @vue/cli
   b. 使用yarn包管理工具,
   下载安装地址:https://yarnpkg.com/zh-Hans/
   npm命令:yarn global add @vue/cli
2. 清除npm缓存之后，重新安装
   1. npm cache clean -f
   2. 重新执行安装的命令

d.创建项目– vue create 项目名
e.弹出的对话框先选择默认的选项

f.稍等一会，等进度条走完 提示如下画面说明成功了

g. 进入项目文件夹

1. cd 项目名 直接根据提示即可

h. 运行项目

1. npm run serve

i. 稍等片刻 ，出现如下效果说明成功了

2.vue-cli的项目结构

3.Vue-cli src代码结构

1. main.js中
   a. 创建了最外层的Vue实例
   b. 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染出来
   c. 和public/index.html 中的那个id为app的div关联起来
2. App.vue 最顶级的那个组件，仅次于Vue实例
3. assets静态资源文件夹
4. components组件文件夹，除了App.vue之外的组件，都写到这个文件夹中即可

4.全局组件的注册

• 顾名思义：注册以后，所有地方都可以使用这个组件
• 用法：
  1. 来到 main.js
  2. 使用 import 名字 from '组件路径' 引入
  3. 调用Vue.componment('组件id'，组件名字) 来注册 （Vue的V是大写）
  4. 在需要用到这个组件地方，写 组件id的标签 就可以了

5局部组件的注册

• 顾名思义：在哪注册，就在哪可以使用
• 用法：
  1. 在需要用的地方，引包 import 名字 from '组件路径' 引入`
  2. 在 export default 里写一个属性： componments 传入一个对象，对象里写 这个组件名
  3. 组件名叫什么，那么在html里就可以写这个名字的标签

6 组件的name属性

1. 直接在组件的内部写name:值即可
2. 不能用中文
3. 写了之后，chrome的vue插件中可以看到这个名字，更加利于检索，利于编码