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

vue

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 启动这个命令

 选择第一个就好

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

以上是 使用VUE CLI3.0搭建项目vue2+scss+element简易版 的全部内容, 来源链接: utcz.com/z/375733.html

回到顶部