提示：vue2依賴node版本8.0以上
前言
使用@vue/cli腳手架vue create創(chuàng)建
使用vue-cli腳手架vue init webpack創(chuàng)建
一、創(chuàng)建項(xiàng)目基于vue-cli
1、查看nodejs版本
node -v
2、全局安裝vue腳手架和webpack腳手架
npm install -g vue-cli
npm install -g webpack
npm install -g webpack-cli
3、新建vue2項(xiàng)目
vue init webpack test-vue2-webpack
創(chuàng)建選項(xiàng)除了，Install vue-router?？選擇是，其他選擇的否
4、安裝依賴并啟動(dòng)文件
cd test-vue2-webpack
npm install
npm run dev
5、預(yù)覽
6、目錄結(jié)構(gòu)
二、創(chuàng)建項(xiàng)目基于@vue/cli
1、如果安裝了vue-cli，需要先卸載vue-cli
npm uninstall -g vue-cli
2、全局安裝vue腳手架和webpack腳手架
npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli
3、新建vue2項(xiàng)目
vue create test-vue2-create
創(chuàng)建選項(xiàng)選擇vue2項(xiàng)目
4、啟動(dòng)文件
這樣創(chuàng)建的項(xiàng)目，不需要npm install，直接可啟動(dòng)
cd test-vue2-create
npm run serve
5、預(yù)覽
6、目錄結(jié)構(gòu)
三、對(duì)吧兩種創(chuàng)建方式
1、使用@vue/cli腳手架vue create創(chuàng)建項(xiàng)目，結(jié)構(gòu)更簡(jiǎn)單，創(chuàng)建完直接安裝完依賴，不需要手動(dòng)npm install
2、使用@vue/cli腳手架vue create創(chuàng)建項(xiàng)目，安裝的依賴更少
3、啟動(dòng)方式，啟動(dòng)方式可以自己配置，看個(gè)人習(xí)慣
//vue-cli
npm run dev
//@vue/cli
npm run serve
4、package.json配置npm run dev啟動(dòng)命令
四、安裝Element ui并引入
安裝和引用element-ui方式都相同，這里拿vue create 的test-vue2-create項(xiàng)目做演示
1、安裝
npm i element-ui -S
2、引入
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
3、按需引入
npm install babel-plugin-component -D
main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//全部引用
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);
//按需引用
import { Button,Input } from 'element-ui';
Vue.use(Button).use(Input);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
4、配置babel.config.js
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
5、修改app.vue
<template>
<div id="app">
<el-button>按鈕</el-button>
<el-input placeholder="輸入框"></el-input>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
6、啟動(dòng)項(xiàng)目預(yù)覽
npm run dev
五、配置路由跳轉(zhuǎn)
1、安裝vue-router
npm install vue-router -S
2、關(guān)閉創(chuàng)建vue component檢查
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
3、新建src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import My from '@/components/My.vue';
Vue.use(Router);
const routes = [
{ path: '/', component: Home },
{ path: '/my', component: My }
]
export default new Router({ routes })
4、新建src/components/Home.vue和src/components/My.vue
Home.vue
<template>
<div class="home">
<h1>Home頁面</h1>
<el-button @click="$router.push('/my')">去My</el-button>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
<style scoped>
</style>
My.vue
<template>
<div class="my">
<h1>My頁面</h1>
<el-button @click="$router.push('/')">去Home</el-button>
</div>
</template>
<script>
export default {
name: 'My',
}
</script>
<style scoped>
</style>
5、修改App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
}
</script>
<style>
</style>
6、修改main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
//全部引用
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);
//按需引用
import { Button,Input } from 'element-ui';
Vue.use(Button).use(Input);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
四、效果
五、參考文檔
1、vue2官網(wǎng)
2、Element UI官網(wǎng)文章來源：http://www.zghlxwxcb.cn/news/detail-851202.html
總結(jié)
踩坑路漫漫長(zhǎng)@~@文章來源地址http://www.zghlxwxcb.cn/news/detail-851202.html
到了這里，關(guān)于vue2創(chuàng)建項(xiàng)目的兩種方式，配置路由vue-router，引入element-ui的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
