vue2 项目搭建 - 使用 VUE CLI3.0 搭建项目 vue2+scss+element 简易版

作者：肥晨

2022-11-07
江苏
本文字数：789 字
阅读完需：约 3 分钟

从 0-1 的 vue2 搭建教程。

1.安装 Vue CLI 3

//三选一即可cnpm install -g @vue/clinpm install -g @vue/cliyarn global add @vue/cli

复制代码

注意：

1.如果安装过旧版的 VUE CLI 需要先卸载掉

//三选一即可npm uninstall vue-cli -g npm uninstall vue-cli -g yarn global remove vue-cli

复制代码

2.VUE CLI3 需要 node.js8.9 版本及以上官方链接》》

2.vue create 搭建新项目

vue create <Project Name> //文件名 不支持驼峰（含大写字母）//如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 winpty vue.cmd create hello-world 启动这个命令

复制代码

选择第一个就好

3.安装 scss

npm install -g sass

复制代码

官方链接》》

4.elementUI

npm i element-ui -S

复制代码

在 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.use(ElementUI);
new Vue({  el: '#app',  render: h => h(App)});

复制代码

官方链接》》

4.axios

npm install axios

复制代码

在 main.js 中写入以下内容：


import axios from 'axios'Vue.prototype.$http = axios

复制代码

官方链接》》

5.路由

npm install vue-router

复制代码

在 app.vue 中写入以下内容：


<router-view></router-view>

复制代码

在 main.js 中写入以下内容：

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

复制代码

在 src 文件夹下创建一个 router.js 中写入以下内容：

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from './components/HelloWorld'


Vue.use(Router)
const router = new Router({    routes: [{        path: '/',        redirect: "HelloWorld "    },    {        path: '/HelloWorld',        component: HelloWorld    },    ]})

export default router

复制代码

这样，一个基本的 vue2 项目框架搭建完成！

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/add79e2effef1932782f3927e】。文章转载请联系作者。

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

vue2 项目搭建 - 使用 VUE CLI3.0 搭建项目 vue2+scss+element 简易版

肥晨

评论