vue+npm+Element插件+路由

首先安装node.js

之后使用管理员输入命令

然后，就可以使用 npm 命令安装了:

npm install -g @vue/cli
安装完后，打开命令行窗口，会有一个 vue 命令:
vue -v 
vue -h查看

然后，就可以使用 vue 命令创建、管理项目了:

# 先切换到相应目录
e:
cd myhomework

# 然后创建项目
vue create vue-hello-world

# 创建完后，切换到项目目录
cd vue-hello-world

# 接下来，启动项目服务器
# 服务器启动后，就可以使用 http://localhost:8080 访问到首页了
npm run serve

# 然后就可以进行开发了
# - public 下面放一些全局静态文件
# - src 下面存在 main.js 跟相关 .vue 文件
# -- main.js 是入口 js 文件

# 开发完成后，就可以将工程打包、分发，运行在客户端了
# 执行完命令，打包的内容会在 dist 文件夹中
npm run build


## 另外，也可以使用图形化界面的形式进行（不推荐）
vue ui

导入 ElementUI 到项目中:

# 首先，通过 vue-cli@3 脚手架创建项目
vue create hello-ele

# 其次，切换到目录
cd hello-ele

# 然后，就可以通过 eleme 的插件将 ElementUI 配置到项目中了
vue add element

运行项目
npm run serve
打包项目
npm run build

cd进入项目 vue add router

<router-link to="/home">Home</router-link> |
                    <router-link to="/about">About</router-link><!--相当于A标签-->
<router-view/>

<!--router部分-->
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import vueapp from './App.vue'

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () =>
                import( /* webpackChunkName: "about" */ './components/About.vue')
        }
    ]
})

 

 Github