cscode搭建vue项目

创建前安装环境

ctrl+j弹出终端

bash 复制代码

node -v # 显示版本号，说明 node 已经装好
npm -v # 显示版本号，说明 npm 可以使用
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v # 显示版本号，说明 cnpm 已经装好

我的mac版本，中间报了错，执行命令才安装好：

全局安装脚手架

cnpm i -g @vue/cli 或 npm i -g @vue/cli

我的没有权限，使用sudo管理员身份执行的

创建项目

我是创建了一个文件夹：/Users/fanzhe/VueProjects

bash 复制代码

cd /Users/fanzhe/VueProjects
# 创建项目
vue create vue-demo

配置项目流程：

上下箭头键：表示选择；回车键：表示确认

1、选择Manually select features，表示手动配置

2、选择需要安装的插件，一般选如下勾选项（按空格键选择）

Choose Vue version：选择Vue版本
Babel：解析 es6 转 es5 的插件
TypeScript：TypeScript插件
Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持
Router：vue路由插件
Vuex：Vuex插件
CSS Pre-processors：css预处理插件
Linter/Formatter：格式化程序
Unit Testing：单元测试
E2E Testing：端到端（end-to-end）

3、选择 vue 版本

4、选择路由模式是否为 history模式，y表示是，N表示使用hash模式，这里选择的是N

5、选择使用那种css预处理器，这里选择的是第二种 scss with node-sass

6、选择编码规则，建议初学者选择第一项，表示只有报错时才会验证

7、何时检测？这里选的是每次保存时验证Lint on save

8、如何存放配置？这里使用 package.json

9、是否保存本次配置（之后可以直接使用），这里选的是保存y

10、保持本次配置的信息并命名（随便取），下次就可以直接使用本次配置，无需从新手动配置

11、配置完成

12、npm run serve 启动项目

项目结构

node_modules 所有依赖项
public 静态内容
- favicon.ico 小图标
- index.html
src 项目执行的主目录
- assets 静态文件
  - 图片、
  - json、
  - iconfont、
- components 组件
- router 路由配置文件
- views 放置页面内容
- App.vue 项目的根组件，文件中可以写路由出口和路由链接，在 main.js里引入
- main.js 项目的主入口文件
.gitignore git的忽略文件
babel.config.js 设置 babel 的配置的
package.json 所有依赖包配置文件
README.md 项目文档

应用

1、两个页面，实现跳转，涉及到路由配置

官方路由文档

（1）、声明式-router-link 【实现跳转最简单的方法】

创建两个页面：

PageOne.vue

bash 复制代码

<template>
  <div class="about">
    <h1>This is PageOne</h1>
  </div>

  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/page-two">PageOne</router-link>
  </nav>
  <router-view/>
</template>

PageTwo.vue

bash 复制代码

<template>
  <div class="about">
    <h1>This is PageTwo</h1>
  </div>
</template>

路径：src-views-xxx.vue

在app.vue中添加跳转：

bash 复制代码

	<router-link to="/page-one">PageOne</router-link> | 
    <router-link to="/page-two">PageOne</router-link>

路由中添加定义

bash 复制代码

import PageOne from '../views/PageOne.vue';
import PageTwo from '../views/PageTwo.vue';

  {
    path: '/page-one',
    name: 'page-one',
    component: PageOne
  },
  {
    path: '/page-two',
    name: 'page-two',
    component: PageTwo
  }

页面效果：

附加知识-----传参：可以参考这篇文章

vue脚手架：动态路由传参（params、query）

1、params

app.vue 修改

bash 复制代码

 <!-- 传参方式1：params方式-->
    <router-link :to="{name:'page-two',params:{username1}}">PageTwo</router-link> 
    <script>

export default {
  data() {
    return {
      username:'张三',
      username1:'李四',
    };
  },
};
</script>

PageTwo读取：

bash 复制代码

<h2>{{$route.params.username1}}</h2>

2、query的两种方式

app.vue修改

bash 复制代码

 <!-- 传参方式1：query方式-->
    <router-link to="/page-one?name=页面一">PageOne：1</router-link> | 
    <router-link :to="{path:'/page-one',query:{username}}">PageOne：2</router-link> |

<script>
export default {
  data() {
    return {
      username:'张三',
      username1:'李四',
    };
  },
};
</script>

PageTwo.vue

bash 复制代码

     <h2>{{$route.query.name}}</h2>
     <h2>{{$route.query.username}}</h2>

index.js修改（params 需要声明参数，query 不用设置参数）

bash 复制代码

  {
    path: '/page-two:username1',
    name: 'page-two',
    component: PageTwo
  }

效果：

cscode搭建vue项目

创建前安装环境

ctrl+j弹出终端

全局安装脚手架

创建项目

配置项目流程：

项目结构

应用

1、两个页面，实现跳转，涉及到路由配置

2个菜单，各有两个子菜单