vue-cli4入门

首先卸载vue-cli2

命令：npm uninstall vue-cli -g，如果安装的时候用的cnpm 那么卸载的时候也需要用cnpm，npm uninstall vue-cli -g
确认vue-cli已经成功卸载了。vue -V

安装vue/cli4

• 使用淘宝镜像安装：cnpm install -g @vue/cli 。@vue/cli表示vue3版本，而@vue-cli表示vue2的版本。
• 使用普通安装：npm install -g @vue/cli
vue -V 查看版本。

创建项目

vue create test-project，手动创建:


使用history模式：


安装成功：

项目文件结构

• public：存放一些静态资源
• src/components：存放组件
• views：是新增的一个文件夹。表示视图。

修改首页

在src/components中有一个src/components/HelloWorld.vue
在src/router/index.js文件中，表示路由。
在src/components中新建文件first.vue,内容如下：

<template>
    <div>这时vue-cli4的第一个页面</div>
</template>

然后修改index.js，首先先引用我们的first.vue:

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

然后修改后面的：

  {
    path: '/',
    component: First
  },

默认的css样式，在src/App.vue下。
默认会有Home|About，因为在src/App.vue下写了：

所以删掉就可以了：