windows系统安装vue的vue-cli
1.cnpm install --global vue-cli # 全局安装 vue-cli
2. vue --version #检测是否安装成功
3.vue init webpack vue-dome (项目名称) # 创建一个基于 webpack 模板的新项目
4. ## 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:
1. cd my-project (项目名称)
2. cnpm install
3. cnpm run dev
安装路由(router)
cnpm install vue-router --save-dev
路由使用
引入路由模块
import VueRouter from 'vue-router' //引入路由模块
配置路由
//使用路由
Vue.use(VueRouter)
//配置路由
const router =new VueRouter({
routes:[
{path:"/",component:Home},
{path:"/helloworld",component:HelloWorld},
],
mode:"history"
})
实例化路由
new Vue({
router, //实例化路由
el: '#app',
template: '<App/>',
components: { App },
})
应用路由
<template>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li> <router-link to="/helloworld">Hello</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
vue-cli 3.0 安装
# 安装
npm install -g @vue/cli
# 查看已安装版本
vue --version 或者 vue -V
# 卸载
npm uninstall @vue/cli
# 新建项目
vue create my-project (项目名)
# 路由安装
npm install --save vue-router
# scc安装
npm install sass-loader --save-dev
npm install node-sass --sava-dev
# axios安装
$ npm install axios -S
注:axios需要配置
# 项目启动
npm run serve
# 打包
npm run build