创建一个vue项目-CSDN博客

本文链接：https://blog.csdn.net/ashirely/article/details/120680938

ves.js 的官网【https://cn.vuejs.org/v2/guide/installation.html】

1、安装Vue

安装node ：从nodejs.org中下载nodejs并安装
安装npm ：【npm install -g npm】
vue.js 安装：【npm install --global vue-cli】
验证安装成功：【Vue --version】

2、创建项目

vue2

1.创建一个基于 webpack 模板的新项目 :【vue init webpack ”项目名称“】
2.输入属性
3.安装项目：【npm install】
4.运行项目：【npm run dev】

vue2.+

1.创建新项目 :【vue create ”项目名称“】
2.输入属性
3.运行项目：【npm run serve】

ui界面创建

vue2项目ui界面创建

3、运行项目

npm install
npm run serve

4、安装Vue路由

代码实现

package.json添加

"dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^3.0.1"
}

执行npm install下载vue-router

ui界面

配置Vue路由

src文件夹下新建router文件，添加index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

//路由跳转的组件，要提前注入
import HelloWorld from '@/components/HelloWorld';//【地方一】
import Index from '@/views/index';
import test from '@/views/test';
import add from '@/views/add';

//路由配置
const router = new VueRouter({
  routes: [
    {
      path:'/',//【地方二】
      name:'HelloWorld',
      component:HelloWorld
    },
    {
      path:'/index',//【地方三】
      name:'index',
      component:Index
    },
    {
      path:'/add',//【地方四】
      name:'add',
      component:add
    },
    {
      path:'/test',
      name:'test',
      component:test
    }
  ]
});

export default router;

使用路由

1、修改main.js文件

import Vue from 'vue'
import App from './App.vue'
// 1.引入刚刚配置的路由（router/index.js）
import router from './router';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2、修改App.vue

<template>
  <div id="app">
    <router-view/>
    <router-link to="/index">首页</router-link>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>