Vue环境步骤

最新推荐文章于 2024-10-31 20:58:11 发布

爱学习的大雄

最新推荐文章于 2024-10-31 20:58:11 发布

阅读量145

点赞数

分类专栏： vue 文章标签： intellij-idea css javascript

本文链接：https://blog.csdn.net/qq_49137582/article/details/123332108

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

命令行都需要使用管理员模式运行

创建一个名为hello-vue的工程
```
vue init webpack hello-vue
```
创建时全部选no

安装依赖

可选

# 进入工程目录
cd hello-vue
# 安装vue-router
npm install vue-router@3.5.13 --save-dev
# 安装element-ui
npm i element-ui -S
# 并安装依赖
npm install
# 并安装SASS加载器//这里的版本建议使用4.0.0版本
cnpm install sass-loader@4.0.0 node-sass --save-dev
#安装axios
cnpm install --save vue-axios

启动测试
```
npm run dev
```
进入idea（需要设置为管理员启动）
删除不需要的文件夹，创建views和router两个文件夹
在views中创建vue视图工具

在router目录下创建名为index.js的路由配置文件

示例:

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

在main,js中配置相关，前面组测的组件要在这里导入

示例：

import Vue from 'vue'
import App from './App'
//扫描路由配置
import router from './router'
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})