提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 一、搭建node
- 二、安装Vue CLI
- 三、搭建新项目
- 四、Elemet安装(参照官网步骤[Element官网](https://element.eleme.cn/#/zh-CN/component/installation))
- 后续继续补充学习过程中遇到的该注意点及注意事项。
新手记录创建VUE2项目过程
提示:以下是本篇文章正文内容,下面案例可供参考
一、搭建node
1.确保电脑已安装了node
2.检查是否安装成功:打开cmd,输如 node -v,如果输出了版本号,即代表我们安装成功了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ab6270e29aa6499385a2c0b8de43c557.png)
二、安装Vue CLI
1.在cmd中输入 npm install -g @vue/cli
注意:如果安装过旧版的VUE CLI需要先卸载掉
npm uninstall vue-cli -g
2.执行vue -V 查看版本:如果输出版本号,说明我们安装vue成功
三、搭建新项目
1.通过cmd跳转到你要存放项目的磁盘/文件夹,执行如下命令
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
2.选择要创建的是Vue3 还是Vue2,我这里是选择的2,然后等待完成即可;
3.出现如下界面就代表完成了。
4.启动项目,首先需要先进入到项目根目录 cd myvue2project,然后执行 npm run serve即可,
然后访问如下地址即可
cd myvue2project
npm run serve
四、Elemet安装(参照官网步骤Element官网)
1.用vscode打开创建好的项目,新建终端,终端中输入如下命令,等待完成。
npm i element-ui -S
2.继续在终端中输入如下命令,等待完成。
npm install babel-plugin-component -D
3.修改main.js中代码如下
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
4.接下来就可以在页面上使用element的组件了。