使用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

 


目录
相关文章
|
22天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
101 60
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
25天前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
39 0
|
25天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
134 0
重读vue电商网站45之项目优化上线
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
下一篇
DataWorks