一、搭建环境
1、安装node.js 下载地址
默认安装路径为：C:\Program Files\nodejs\
2、配置全局变量
创建以下两个空文件夹，并在cmd命令行执行下面两个命令
$ npm config set prefix "C:\Program Files\nodejs\node_global"
$ npm config set cache "C:\Program Files\nodejs\node_cache"
3、系统变量中新增
NODE_HOME C:\Program Files\nodejs
NODE_PATH C:\ProgramFiles\nodejs\node_global\node_modules
4、在系统变量path中新建
%NODE_PATH%
%NODE_HOME%
%NODE_HOME%\node_global
安装完成后即已成功安装nodejs及npm。注意需要重新启动VScode
5、配置npm
# 查看镜像源
$ npm config get registry
# 修改镜像源为淘宝镜像
$ npm install -g cnpm --registry=http://registry.npm.taobao.org
# 查看版本
$ node -v
#v18.17.1
$ npm -v
#9.6.7
# 查看npm的本地仓库:
$ npm list -global
推荐：Vscode必装插件 open in browser 、Vetur
二、Vue 官方的项目脚手架工具
vue-cli为2.x版本时vue的脚手架，@vue/cli为3.x版本的脚手架.脚手架向下兼容，所以安装@vue/cli
# 安装脚手架
npm install -g @vue/cli
# 创建vue代码工程，可以自由选择vue2或者vue3
vue create vue_test
# 启动
cd vue_test
npm run serve
# 卸载vue
$ npm uninstall vue
三、 ElementUI
安装
npm i element-ui -S
引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
四 、Vue Router
安装
## vue2中只能用vue-router3以下版本
npm install vue-router@3
## 安装最细版本
npm install vue-router
## 卸载
npm uninstall vue-router
引入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
使用
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
