web前端开发之vue脚手架

vue脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

一、安装和配置脚手架

1.1 安装脚手架

npm install -g @vue/cli    // -g是全局安装

1.2 创建一个项目

vue create first  //first是项目名称

运行之后我们会发现出现了一些选择

1.3 项目选择

1.3.1 选择预设值

我们一般选择第三项 使用自己的模板

1.3.2 选择项目特性

使用空格键选中/取消

• 是否选择版本(*)
• 把JS高级语法转为低级语法(*)
• 编码格式
• 暂时不需要
• 路由(*)
• 状态管理工具
• CSS转换工具
• 编码规范

1.3.3 选择vue版本

在实际开发中 vue 2.x依旧是主流 我们选择2.x即可

1.3.4 是否使用历史模式

默认为hash模式

但是如果选择Y之后需要对服务器进行配置 对于新手来说我们选择n

1.3.5 是否新建单独配置文件

我们选择第一个

1.3.6 是否选择历史模式

意思就是说 我们之前已经进行过配置

在新建项目的时候是否选择上一次的配置

因为每次创建项目都不相同 所以在这里我们选择n

1.4 启动项目

• 在安装完成之后 使用命令行进入创建的项目
• 之后运行 npm run serve
• 复制地址 如果可以正常访问 代表创建成功

1.5 项目结构

• assets 中放一些资源 比如 logo背景小图标
• components中放一些局部组件 比如nav导航条
• views中放一些页面组件
• App.vue 根组件
• router 配置路由
• 服务根目录对应的是public目录

二、常遇到的一些问题

2.1 不同组件之间传值

传值：

<router-link :to="{ name: 'Detail', params: { id: 1 } }">详情</router-link>bue

这里的name属性是路由中的name 同时 路由中的地址应在/后加/:id

{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  },

接收：

    created:function(){
        // this代表vue组件
        this.$route.params.id
    },