自学内容网 自学内容网

vue2.0新建项目

一.新建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')

测试Element是否引入成功:修改如下代码然后运行npm run serve
在这里插入图片描述
成功如下:
在这里插入图片描述


原文地址:https://blog.csdn.net/qq_41739657/article/details/143903528

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!