VUE安装

安装node.js(https://nodejs.org/en/download/)内置npm

检测进入cmd node-v 出现版本号即可

修改npm文件缓存及模块下载位置

npm config set cache "D:SoftwareNode
pm_cache"
npm config set prefix "D:SoftwareNodenpm_global"

配置npm国内镜像

//NPM国内镜像
npm config set registry https://registry.npm.taobao.org
//安装CNPM（用法与NPM一致，为淘宝的国内镜像）
npm install cnpm -g --registry=https://registry.npm.taobao.org

任选其一即可

检查

npm config ls

配置环境变量

D:SoftwareNode
pm_global

一、手动安装

安装vue

npm install vue

生成package.json

npm init -y

在dependencies中加入以下依赖

"vue": "^2.6.11",
"@vue/cli-service": "^4.4.6",
"vue-router": "^3.3.4",
"vue-template-compiler": "^2.6.10"

在scripts中添加

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

安装依赖

npm install

根目录新建src/

main.js

import Vue from 'vue'
import App from './App.vue'
import Route from 'vue-router'

Vue.use(Route);
import Index from '../pages/index/index.vue';
import Test from '../pages/index/test.vue';

Vue.config.productionTip = false
const router = new Route({
  mode: 'history',
  routes: [
    { path: '/', component: Index },
    { path: '/test', component: Test }
  ]
})


new Vue({
  render: h => h(App),
  router
}).$mount('#app')

src/

App.vue

<template>
    <div>
        <!-- <div>4566464</div> -->
        <div>
            <!-- <Index/> -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

根目录新建pages/index/

index.vue

<template>
    <div>
        <button @click="tt()">跳转</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created() {
            setTimeout(() => {
                this.tt();
            }, 2000)
        },
        methods: {
            tt() {
                this.$router.push('/test');
            }
        }
    }
</script>

<style>
</style>

test.vue

<template>
    <div>456456</div>
</template>

<script>
</script>

<style>
</style>

简单的基础页面结构完成

（做复杂应用的话直接用Hbuilder生成vue-cli项目脚手架）

二、脚手架安装

安装脚手架

npm install -g @vue/cli

1、命令行安装

创建项目(注意项目名不允许大写)

vue create porjectName

运行后将选择项目 preset （预设）可选择手动设置，也可选择默认模板

1、图形化界面安装

vue ui

运行后将在默认浏览器中打开图形化安装

根据提示安装所需依赖即可

三、运行

运行

npm run serve

打包

npm run build