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

简介: 笔记

1.安装Vue CLI 3

//三选一即可
cnpm install -g @vue/cli
npm install -g @vue/cli
yarn 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 启动这个命令

11.png

 

选择第一个就好

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

 


目录
相关文章
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
2天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
106 0
重读vue电商网站45之项目优化上线
|
2天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
2天前
|
JavaScript
|
2天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1
|
3天前
|
JavaScript 前端开发 API