1.先查看是否有安裝到node砂缩，vue運行需要依賴于node的npm管理工具他巨，安裝node就有npm
可以安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安裝vue
cnpm install vue -g
3.安裝腳手架vue-cli
cnpm install vue-cli -g
4.創(chuàng)建項目
打開需要存放的文件夾
vue init webpack my-demo（項目名）
5.進入文件夾碗殷，安裝依賴并跑項目
cd my-demo
npm install
npm run dev
6.安裝Element
npm i element-ui -S
7.引入Element
在main.js中引入
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
8.安裝sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
9.sass拓展名為.scss
10.路由配置
- 安裝腳手架時已經(jīng)確定安裝了vue-router，所以這里不需要再安裝了
- router/index.js內(nèi)容
const routes = [
{
path: '',
component: () => import('../components/HelloWorld')
}
]
export default routes
- main.js的內(nèi)容
import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import routes from './router'
Vue.use(Router)
const router = new Router({
mode: 'history', // history需要后端配置
routes
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- src文件目錄結(jié)構(gòu)
assets // 圖片
components // 組件
router // 路由
style // 樣式
store // 狀態(tài)管理，使用vuex時需要創(chuàng)建的文件夾安放
app.vue
main.js
- 總結(jié)：到這里基本上一個環(huán)境就搭建完成了悟泵，一開始搭建環(huán)境的時候會覺得不知道文件該放哪，怎么樣引入挑童，就無從入手累铅，所以簡單的總結(jié)了一下從無到有的vue開發(fā)環(huán)境。
