node.js安装：https://www.nodejs.cn

安装node成功之后，node -v不可运行，需要配置环境变量

window：我的电脑-系统属性-环境变量-path

查看node版本号：node -v

npm是node.js的一个指令。

查看npm版本号：npm -v

vue-cli：cli2、cli3

Command-Line Interface：又称命令行界面或字符用户界面

为什么使用vue-cli?    Vue-cli是Vue的脚手架工具

1. 平台无关性、功能更齐全

2. 占内存少、更高效

3. 帮助我们写好vue基础代码的工具，也是行业内通用的工具

系统的认识一下vue的主体结构

app.vue是所有vue文件的父级优先级是最高的主题文件

目前所有的默认配置来源于app.vue的设置其中包括：

居中：在样式中text-align: center;

图片：是第三行的标签<img src="./assets/logo.png">

补充

<script></script>：为逻辑层，所有的逻辑代码以及配置项都在这里完成

<style></style>：为样式层，页面的样式在这里定义

如何导入vue-cli项目

cd进入到项目中然后npm install安装vue项目依赖

进入后可以先检查是否有vue-cli项目的运行环境，验证npm与vue是否安装即可：

npm -v 和vue -V（注意vue -V V 是大写的）

如果都出现版本号就不需要安装npm依赖直接可以npm run dev

都实现以后就可以直接将项目跑起来

npm run dev

关于vue-cli 的添加与卸载

准备工作

在这里以eslint为例

回顾一下创建vue项目的语法：

vue init webpack projectName

eslint：为 vue 的代码的规范检查插件

注意安装的内容放到什么环境中：

-g：--global（全局）

-S：--save（生产环境：dependencies）//针对可以上线的项目

-D：--save-dev（开发环境：devDependencies）//针对开发过程中

安装与卸载

npm install eslint --save-dev（把eslint安装到开发环境中）

npm uninstall eslint --save-dev（把eslint从开发环境中移除）

关于地址栏中 # 

• 地址栏中，经常出现#，是什么作用，能不能去掉#？

• hash模式：地址栏包含#符号，#以后的不能呗后台获取

• history模式：具对url历史记录进行修改的功能

• 在微信支付、分享url作为参数传递时，#不能满足需求

• history需要后台配合，处理404的问题

通常不建议用hash模式的地址栏，原因是其中的#不能被获取或者当成参数传递，这时候需要把hash模式更改为history模式。

在index.js中配置即可

export default new Router({

mode:'history', //把模式指定为history就可以去掉 #

})

router 实现子页面跳转再返回

创建A、B的子页面A1、B1 .vue结尾的文件

页面中编辑

index.js中的配置与逻辑

import A1与B1

A1属于A所以在A的跳转配置中加入字段

children:[{ //常用于父框架中嵌入子页面的操作，会保留父框架的内容嵌入子框架

    path: '/a1',

     name: 'A1',

     component: A1

},{}];

并在A页面的<router-link to="/A1">标签加入跳转路径

<router-view></router-view>：用于挂载子页面的位置，必须在父页面中添加这个标签，才能把要挂载的子页面显示到<router-view></router-view>中

实现简单的页面跳转

主要是通过index.js的配置实现

先创建a、b两个vue页面分别编辑内容并绑定跳转链接

在first中定义两个跳转标签，分别对应a、b页面

<router-link to=""> ：用于跳转， to 对应 index.js 中 component 配置好的路径

书写格式：

<router-link to="/a"> 转向A</router-link>

 <router-link to="/b">转向B</router-link>

index.js的配置项

一定要import三个页面的路径

import First from '@/components/first.vue'

import A from '@/components/a.vue'

import B from '@/components/b.vue'

然后就是页面调用的配置项

  routes: [

    { //first首页的配置项

      path: '/',

      name: 'first',

      component: First

    },

    {//a页面的配置项

      path:'/a',

      name:'a',

      component:A

    },{//b页面的配置项

      path:'/b',

      name:'b',

      component:B

    }

  ]

vue-cli项目的配置与页面绑定（第一阶段）

先启动服务

d: - cd testcli（进入testcli文件中） - dir（查看testcil的文件目录中的文件） - cd test1（进入test1项目中） - npm run dev（运行项目）

获取到 localhost:8080/#/ 并在浏览器中访问

创建自己的vue helloword页面

使用编译器打开test1项目找到src

src文件用于存放页面相关的文件如 页面vue文件、配置跳转的index.js文件

components：components文件夹下是存放自定义vue页面的

router：router文件夹中有一个index.js用于首页跳转的配置，默认配置，配置以后会指定首页页面为哪一个

配置子的vue helloword页面

在index.js中先用import引入我们创建的first.vue

import First from '@/components/first.vue'

//First ：是命名这个引用，业内默认首字母大写  @：是相对路径

routes: [

    {

      path: '/', //代表根目录根节点

      name: 'First', //当前跳转的命名备注

      component: First //刚刚我们import的命名

    }

  ]

创建vue-cli搭建起来的项目

命令行创建：vue init webpack （projectName）

init：创建

webpack：模板（一般都是用webpack非常的常用）

（projectName）：项目名称，注意一定要小写

需要用户干预的地方

? Project name test1

//项目名称确认，一般跟文件名称想用默认就行，必须全小写（回车下一项）

? Project description A Vue.js project

//给当前项目添加说明、描述，类似readme

? Author name <***@qq.com>

//作者（回车下一项）

? Vue build standalone

//选择运行和编译是否同步进行 默认就行（回车下一项）

? Install vue-router? Yes

//选择路由模式，这里必须选择  y = yes，如果不选择yes页面跳转会很生硬，不流畅

? Use ESLint to lint your code? No

//选择代码的规范，规范格式，书写等方面，新手写demo建议选择no，正规的项目开发一定要选择yes，有利于规范团队开发的可视化（后期可以改变状态）

? Set up unit tests Yes

//是否需要单元测试（回车下一项）

? Pick a test runner jest

//选择单元测试（回车下一项）

? Setup e2e tests with Nightwatch? Yes

//也是单元测试（回车下一项）

? Should we run `npm install` for you after the project has been created? (recommended) npm

//否应该在项目创建后为您运行' npm安装' (推荐)npm    （ 默认就好）

运行我们的vue项目

运行指令：npm run dev（在项目根目录运行）

运行结束后会返回一个访问路径：http://localhost:8080

浏览器访问看到vue欢迎页面就可以了，这里跟tomcat有异曲同工之妙

cnpm的镜像使用配置指令

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证cnpm是否安装成功 cnpm -v

出现版本号就代表成功了

安装好后通过 cnpm -install -gd vue-cli 安装vue脚手架

-gd的意思是安装到全局且开发与应用环境当中

安装完成后验证vue是否安装成功的执行指令

vue -V V一定为大写注意

出现版本号就代表成功了

vue-cli的安装

npm与cnpm的区别

• 
  

  • cnpm 国内淘宝镜像的npm管理器用于替代国外服务器

  • npm（node package manager） 是 nodejs包管理器

 -g 全局安装（global）

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

vue-cli2安装

自动安装

    npm install -g vue-cil（默认安装指令）

    cnpm install -g vue-cil（镜像安装指令，需要配置淘宝镜像）

手动淘宝镜像安装

    npm install -gd express --registry=http://registry.npm.taobao.org

淘宝镜像资源永久设置指令：

npm config set registry http://registry.npm.taobao.org

nodejs的安装

    nodejs.cn //安装网址根据机型选择对应的版本安装

    下载好后一直下一步就可以了，记下安装路径用于环境变量配置一般放到C://

    在phth的环境变量中添加安装好的nodejs目录路径方便在系统的任何地方都能使用nodejs

    cmd验证nodejs与npm的版本

    node -v 与 npm -v

常用的dos命令（脚手架的使用过程中必须会的命令）

1. cd 打开文件夹

2. md 创建新文件夹

3. dir 查看文件夹内容

4. cd..返回上一级文件夹

举栗子：

• d:（切换到d盘）

• md vuecli2（创建一个叫vuecli2的文件夹）

• cd vuecli2（进入到vueclis的文件夹中）

• dir（查看当前所在的文件夹的信息）

• cd..（返回上一级）
  

  
  

子路由 children：[{

path:'/A1'

component:A1

},

]