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

vue-cli脚手架搭建项目

单文件组件

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

Vue-cli ---脚手架工具

基本概念及做用

1. 把 .vue 翻译成浏览器能够识别的内容
2. 自动刷新浏览器
3. 自动压缩代码
4. 自动的把js翻译为低版本的js(es6/7 翻译成es5)
5. 做为代理服务器(在本地开启一个小型的web服务器)
6. 方便帮咱们管理咱们导入的第三方包
7. ....

vue-cli 安装

官网

安装

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

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

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

注意点

1. 1. 第一次安装，安装成功了
2. 1. 已经安装过，从新安装
3. 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. 从新执行安装的命令
4. 命令查看是否成功
   1. vue --version

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

 

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

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

Vue-cli项目建立

传送门

正常的流程

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

注意事项

1. 建立以后会多一个项目文件夹，路径不要乱选
2. 项目名不要有中文，不要有大写字母，尽量有意义

vue create 项目名
例如：vue create demo

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

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

1. 进入项目文件夹

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

      cd demo

2. 运行项目

   1. npm run serve

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

注意

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

报错的缘由

1. 建立的命令输入错误create输入成了creat

2. 1. 网络问题，有线换无线，无线换4G
   2. 终端的权限问题；新建管理员模式的终端
   3. 当前这个文件夹，这个文件被其余软件占用：关闭全部可能影响的软件（重启）
   4. npm包管理工具的问题:
      1. 用yarn来安装
      2. 执行npm cache clean -f 在从新建立项目

3. 建立项目是，又到了第三方模块，文件太多了git认为没有必要管，提示你一下

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

实在没法建立项目的解决方案（重要）

1. vue-cli建立项目的本质是：

   1. 建立文件夹
   2. 下载第三方模块
   3. 建立项目的基本结构
   4. 设置各个文件之间的关系
   5. 建立git仓库

2. 找一个能够建立项目的人，建立一个项目

   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>）

1. 组件的逻辑直接写在 xx.vue,子组件写在components文件夹内

   • index.vue 新建子组件，在子组件中输入 sca 生成结构代码

2. 目前写在App.vue 这个顶级组件里

3. 静态资源放到assets文件夹下面，直接使用对应路径便可引入

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

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

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

   1. 在main.js文件中引入

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

Vue-cli src代码结构

1. main.js中
   1. 建立了最外层的Vue实例
   2. 把App.vue这个组件，当作Vue实例内部的最顶级组件并渲染出来
   3. 和public/index.html 中的那个id为app的div关联起来
2. App.vue 最顶级的那个组件，仅次于Vue实例
3. assets静态资源文件夹,网站的全部静态文件都放到这个文件夹
4. 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> 

    第二步：

  1. 来到 main.js

  2. 使用 import 名字 from '组件路径' 引入

  3. 调用Vue.componment('组件id'，组件名字) 来注册 （Vue的V是大写）

  4. 在须要用到这个组件地方，写 组件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属性

1. 直接在组件的内部写name:值便可

2. 不能用中文

3. 写了以后，chrome的vue插件中能够看到这个名字，更加利于检索，利于编码

   代码以下：

   <script> export default { name:'hellovue' } </script>

Vue-cli项目的路由整合

准备工做

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

整合路由

1. 下载路由 npm i vue-router
2. 导包 import VueRouter from 'vue-router'
3. 用包
   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')

编码位置

1. 导入 注册路由 main.js
2. routerlink router-view app.vue
3. 添加组件components/
4. 静态资源assets

注意

1. 若是页面不够美观 能够找到对应的组件调整结构

2. 若是路由对应的组件不够美观，找到对应的组件调整结构

总结

1. 单文件组件的组成
   1. 结构
   2. 逻辑
   3. 样式
2. vue-cli(脚手架)
   1. 把不少开发中须要用到的功能整合到了一块儿
   2. 让vue的开发人员直接专一于逻辑代码便可
   3. webpack配置出来的
3. 建立项目
   1. vue created 项目名
      1. 不能中文，不能大写
   2. 项目建立很差用别人建立好的，本身npm i
4. 运行项目
   1. 小黑窗进入项目文件夹
   2. npm run serve
5. vue-cli建立的项目
   1. 下包怎么下npm i 模块名
   2. 如何导包import 名字 from '模块名'
6. 整合路由
   1. 组件新建一个文件
   2. 路由的设置main.js
   3. App.vue router-link router-view
7. 项目运行

   1. npm run serve

   2. 根据小黑窗中提示的路径 ，在浏览器中打开便可

以上就是我初次使用vue-cli的体验，小伙伴们一块儿来体验吧！！