Vue学习之vue-cli搭建

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