Vue-cli脚手架工具搭建项目

最新推荐文章于 2022-07-18 22:28:45 发布

bangyang7328

最新推荐文章于 2022-07-18 22:28:45 发布

阅读量164

点赞数

原文链接：http://www.cnblogs.com/KoBe-bk/p/11443470.html

版权

vue-cli脚手架搭建项目

单文件组件

简单来说就是把组件单独放到一个文件里
在vue里面，我们这个文件的后缀叫 .vue
.vue有默认的三大部分： template script style
如何生成三大部分？快捷键：sca + 回车完整版:scaffold + 回车//修改现在已经更新为 <vue

Vue-cli ---脚手架工具

基本概念及作用

把 .vue 翻译成浏览器可以识别的内容
自动刷新浏览器
自动压缩代码
自动的把js翻译为低版本的js(es6/7 翻译成es5)
作为代理服务器(在本地开启一个小型的web服务器)
方便帮我们管理我们导入的第三方包
....

vue-cli 安装

官网

安装

安装淘宝镜像文件：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架第一种方式：npm install -g @vue/cli, 在任意的路径都可以，这是全局安装，安装成功一次即可

安装脚手架第二种方式：vue ui 这是通过ui界面的方式来安装

注意点

1. 第一次安装，安装成功了
1. 已经安装过，重新安装
1. 类似于这样的一堆err!安装失败了
2. 解决方案:
  1. 更换网络环境：有线，换无线，无线换4G
  2. 更换安装的工具
    1. cnpm ：cnpm install -g @vue/cli
    2. yarn :yarn global add @vue/cli
  3. 清除npm缓存之后，重新安装
    1. npm cache clean -f
    2. 重新执行安装的命令
命令查看是否成功
1. vue --version

总结：脚手架的安装就一行命令

1.安装：npm install -g @vue/cli

2.安装完成查看版本： vue --version

Vue-cli项目创建

传送门

正常的流程

vue-cli 安装完成之后，就可以开始创建项目了，小伙伴们快来体验吧！！

注意事项

创建之后会多一个项目文件夹，路径不要乱选
项目名不要有中文，不要有大写字母，尽可能有意义

vue create 项目名
例如：vue create demo

弹出的对话框先选择默认的选项

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

进入项目文件夹
1. cd 项目名 直接根据提示即可
  
  cd demo
运行项目
1. npm run serve
稍等片刻，出现如下效果说明成功了

注意

项目搭建完成先复制一份，目的是为了下个项目直接使用，而不用再重新安装脚手架

报错的原因

创建的命令输入错误create输入成了creat
1. 网络问题，有线换无线，无线换4G
2. 终端的权限问题；新建管理员模式的终端
3. 当前这个文件夹，这个文件被其他软件占用：关闭所有可能影响的软件（重启）
4. npm包管理工具的问题:
  1. 用yarn来安装
  2. 执行npm cache clean -f 在重新创建项目
创建项目是，又到了第三方模块，文件太多了git认为没有必要管，提示你一下

vue-cli创建项目是，已经设置了git忽略文件就在.gitignore中

实在无法创建项目的解决方案（重要）

vue-cli创建项目的本质是：
1. 创建文件夹
2. 下载第三方模块
3. 创建项目的基本结构
4. 设置各个文件之间的关系
5. 创建git仓库
找一个可以创建项目的人，创建一个项目
1. 删除 node_modules
2. 发给你
3. 你使用 npm i 安装项目中用到的第三方模块
4. npm run serve

总结：脚手架创建项目流程

vue create demo
cd demo
npm run serve

vue-cli项目初体验

Vue-cli项目结构介绍

脚手架创建完项目后，会自动把项目加入git托管功能

详细解释

vue-cli 项目文件夹名称
node_modules 第三方包文件
public 传统意义的首页和图标
- favicon.ico 图标
- index.html 脚手架自动生成的，我们无需理会，但是后面cdn加速的时候需要修改里面配置
src assets和components ---代码都写在src里面
- assets ：存放所有的静态资源（图片、样式、字体图标）
- components :组件各种各样的组件放到components里面
- App.vue : 主组件，是唯一的，相当于我们之前写的index.html 入口文件
- main.js : 入口js 文件，项目一启动会先来执行main.js里面的代码；在这个文件里我们可以导入第三方包和其他字组件
.gitignore 告诉git哪些文件夹需要忽略，让git忽略某些文件和文件夹如：node_modules
babel.config.js js的编译设置，脚手架可以把高版本js转成低版本js就是在这个文件夹
package-lock.json 项目的配置信息
package.json 记录第三方模块的一些信息；注意：在serve里面加上--open 就会默认打开网页

Vue-cli项目代码编出初体验

1.来到项目文件目录，注意是要进到项目里面，打开小黑框

在小黑框命令行输入：npm run serve 输入命令之后，它就会将项目打包，而且有一个小型的 web服务器，之后你就可以访问了，如下：

自己电脑上访问用 loacal，别人访问用 network,访问结果如下：

2.main.js和 App.vue

main.js 和主组件代码分析：

1.main.js 首先进入main.js 查看内容：

import Vue from 'vue' import App from './App.vue' //导入子组件index.vue import index from './components/index.vue' // 是否打印提示信息，可以删除 // 删除的话，默认值为true Vue.config.productionTip = false // new Vue({ // render: h => h(App), // }).$mount('#app') // 上面注释代码 相当于如下： new Vue({ el: '#app', // 把App组件渲染出来,页面一启动就渲染的页面，这就是为什么默认渲染的App.vue render: h => h(App), })

2.主组件 App.vue，进入清空里面代码；输入快捷键 sca生成结构代码（ <script><style>）

组件的逻辑直接写在 xx.vue,子组件写在components文件夹内
- index.vue 新建子组件，在子组件中输入 sca 生成结构代码
目前写在App.vue 这个顶级组件里
静态资源放到assets文件夹下面，直接使用对应路径即可引入

css assets也是这个文件夹，如何引入? 这是2种导入css样式的方式

直接在App.vue 文件 style标签中引入

  /* 使用css支持的语法导入 */
  /* @import url('./assets/base.css'); */

在main.js文件中引入

// 导入 样式
import './assets/base.css' //这是vue的写法

Vue-cli src代码结构

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

注册全局组件

顾名思义：注册以后，所有地方都可以使用这个组件
组件的三大部分
- >
- <script></script>
- <style></style>

快捷键 sca +回车或者 <> + 回车

使用组件的注意事项：

1.里面必须用跟标签包裹

  <template>
      <div>
          <h1>我是组件1</h1> </div> </template>

2.代码写到 exprot default 里面

  <script>
  export default {
  
  };
  </script>

详细过程：

第一步：在components文件夹下，新建组件

sca

创建子组件

代码如下：

<template>
    <div>
        <h3>我是hello vue</h3> <button @click="tips">点我呀</button> </div> </template> <script> export default { methods:{ tips(){ alert('我被点了'); } } } </script> <style> </style>

第二步：

来到 main.js
使用 import 名字 from '组件路径' 引入
调用Vue.componment('组件id'，组件名字) 来注册（Vue的V是大写）

在需要用到这个组件地方，写 组件id的标签 就可以了

代码如下：

// 进入main.js 文件
import Vue from 'vue' import App from './App.vue' // 导入子组件 hellovue import hellovue from './components/hellovue.vue' //注册组件 Vue.component('hello',hellovue); // 是否打印提示信息，可以删除 // 删除的话，默认值为true Vue.config.productionTip = false // new Vue({ // render: h => h(App), // }).$mount('#app') // 上面注释代码 相当于如下： new Vue({ el: '#app', // 把App组件渲染出来 render: h => h(App), })

注册局部组件

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

代码如下：

<template>
  <div>
    <h1>这是我创建的第一个cli项目</h1> <hello></hello> <localvue></localvue> <localvue></localvue> </div> </template> <script> // 注册局部组件,在哪注册，在哪使用 在App.vue里注册的只能在App.vue里面使用 import localvue from './components/localvue.vue' export default { components:{ localvue } } </script> <style> </style>

组件的`name`属性

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

代码如下：
```
<script>
export default {
	name:'hellovue' } </script>
```

Vue-cli项目的路由整合

准备工作

创建项目vue create 项目名
进入项目文件夹cd 项目名
运行项目npm run serve
稍等片刻，通过提示的地址在浏览器中打开
删除多余的组件components/内部的文件
删除app.vue中的内容

整合路由

下载路由 npm i vue-router
导包 import VueRouter from 'vue-router'
用包
1. 创建路由规则
  1. 创建一个组件xxx.vue
  2. routes=[ {path:"/xx",component:组件} ]
2. 创建路由对象
  1. router
3. 设置给Vue实例
  1. new Vue({ router })

代码如下：

// 导入路由
import VueRouter from 'vue-router';//注意大小写 // use一下 Vue.use(VueRouter); // 1.导入组件 import index from "./components/03.index.vue" // 2.准备规则 const routes = [ { path: "/index", component: index } ] // 3.创建路由对象 const router = new VueRouter({ routes }) new Vue({ render: h => h(App), //4.挂载路由 router }).$mount('#app')