当前位置：首页 > article >正文

vue2.0新建项目

article 2024/11/22 5:21:29

一.新建vue2.0脚手架

1.cmd 输入（此步科省略到第四步安装）

npm install -g @vue/cli

2.打开vscode 新建终端
在这里插入图片描述

3.进入对应前端文件夹
在这里插入图片描述
4.安装vue 脚手夹

5.终端输入：vue create vue项目名称。如vue create dormitory(创建一个名为dormitory的项目)，回车。

vue create dormitory

6.选择vue2.0或vue3.0 默认最后一个
在这里插入图片描述
7.按如下图进行配置，使用空格键选中。

选择vue2.0

回车后，这个输入y

回车后选择最后一个package.json

在这里插入图片描述
回车后输入 n

8.VS code中打开该项目，文件—打开文件夹 dormitory 所在目录

打开后文件初始结构：

9.运行项目
终端输入npm run serve

点击local链接或network链接成功如下：

二安装element - ui

成功后首先终止操作在终端ctrl+c停止然后输入npm i element-ui -S安装element-ui。
在main.js中引入Element UI
在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';// 添加
import 'element-ui/lib/theme-chalk/index.css'; // 添加


Vue.config.productionTip = false
Vue.use(ElementUI);// 添加element-ui

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