vue-cli全集 学习笔记

什么是前台、后台

前台：是指以Html5、CSS为基础的页面的开发，重在页面的布局美化

后台：是指包括但不限于以JAVA这样的开发工具来进行的开发，也称为服务器的开发

什么是前端、后端

”前端就是前台，后端就是后台“这句话不严谨！

前端和后端属于前台的分支

前端：特指页面的开发，修饰，美化等，页面的基本元素。

后端：指后端的服务，为了使页面能正常的跳转、页面之间可以变量进行共享，为页面提供更好的服务。例如：vue-cli

node.js安装(https://www.nodejs.cn)

node:与vue有一定的联系，但是不同。node就是后端，给页面提供服务的。vue是前端的框架。

node衍生出来的npm指令

node.js学习手册

npm与cnpm的区别

npm（node package manager）是node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

cnpm:因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器

-g 参数

全局安装（global），可以在命令行下直接使用

可以通过npm root -g查看全局安装的文件夹位置

-S、--save参数

安装包信息将加入到dependencies ( 生产阶段的依赖 )

-D、 --save--dev参数

安装包信息将加入到devDependencies（ 开发阶段的依赖 ）所以开发阶段一般使用它

-i 参数

是install的缩写 （注意：前面没有 “-”）

vue-cli2安装

安装命令

• npm install -g vue-cli
• cnpm install -g vue-cli
• npm install -gd express --registry=http://registry.npm.taobao.org ( npm走淘宝镜像 )

为了避免每次安装都需要--registry参数，可以使用如下命令进行永远设置

• npm config set registry http://registry.npm.taobao.org ( 设置npm的下载位置为淘宝镜像 )
• npm init -f ( 配置文件初始化 )

cnpm下载

• npm install -g cnpm --registry=https://registry.npm.taobao.org ( 下载cnpm )

• cnpm -v: 显示版本信息
• vue -V: 显示vue版本号

创建vue-cli项目

• vue init webpack projectName

创建cli过程中部分配置内容

• Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可
• Use ESLint to link your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目都会使用。

1. 项目名：项目名小写字母+数组
2. 项目说明：
3. 作者
4. 运行和编译是否同时进行
5. vue-router路由
6. ESLint代码规范
7. 是否需要单元测试
8. e2e也是单元测试

搭建完成后，执行以下命令：

cd test1 //进入项目目录
npm run dev //运行项目

输入以下网址，出现相应网站即为成功。

vue-cli项目案例示例一

• 将vuecli的首页更改为显示自定义的helloworld

vue-cli项目案例实现效果二

• 在首页，可以通过链接进入a，b两个“页面”
• 在a，b两个“页面”可以返回首页

vue-cli项目案例实现效果三

• 在项目案例效果二的基础上，实现嵌套路由的效果： children:[{}, {}]

小贴士

• 地址栏中，经常出现#，是什么作用，能不能去掉#？
• hash（哈希）模式：地址栏包括#符号，#以后的不被后台获取
• history（历史）模式：具有对url历史记录进行修改的功能
• 在微信支付、分享url作为参数传递时，#不能满足需求
• history需要后台配合，处理404的问题

怎样导入vue-cli项目

首先需要添加依赖

npm install

vue-cli3

不用vuecli的模板

• 安装依赖：npm install 或者cnpm install
• 初始化：npm init -f 或者 cnpm init -f
• 安装组件，并查看安装后的内容

vue-cli3安装/升级-1

• 卸载vue-cli2: npm uninstall vue-cli -g
• 普通安装:vuecli3: npm install -g @vue/cli
• 淘宝镜像安装：vuecli3: cnpm install -g @vue/cli

vue-cli3图形界面

vue ui

vue-cli3 NPM安装

• 安装vuecli3： vue create proName
• 启动vuecli3项目： npm run serve

vue-cli3中vue-router写法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

const About = () => import('../views/About.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

vue-cli3添加样式的三种方法

内联式

外联式

ys1.css

.ys1 {
  color: yellow;
  font-size: 30px;
}

公共资源

vue-cli3项目案例

结果：

主要使用的技术

• 主要及组件间传值
• axios实现读取json数据：商品的数据源存于json中
• css相关技术进行布局：布局、间距等样式
• 使用views页面级组件，使用router设置页面

public文件中放置不会改变的文件

assets放置会变动的文件 

项目git地址：https://github.com/tfjy1997/vuecli3Test

 

感谢bzxs老师的教诲，课程链接：https://www.imooc.com/learn/1173