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

posted on 2018-11-22 11:36  东子z  阅读(259)  评论(0编辑  收藏  举报

导航