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

巴特西

vue+npm+Element插件+路由

最新文章

热门文章