如何啓動一個Vue2.x項目

1. cd到工做目錄
2. npm init -y
3. 先查看有沒有安裝全局的vue-cli,:vue-V,沒有的話安裝一下:npm install vue-cli
4. 建立項目: vue init webpack Luffy (項目名)
若是出問題: Mac安裝Vue-cli時 提示bash: vue: command not found問題
http://www.cnblogs.com/wz2018/p/9849000.htmlcss

? Project name luffy
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created?(recommended) (Use arrow keys)
❯ Yes, use NPM html

5. 項目啓動 npm run dev vue


目錄結構:
build: 出口文件,webpack配置文件
src: 工做目錄 main 主入口文件
index.js: 註冊組件webpack


component 建立組件,
app.vue 中註冊web

重啓項目 須要cd 進入本身創建的項目下 而後 npm run devvue-router


使用element-uivuex

1. 在 main.js 中寫入如下內容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
加載: Vue.use(ElementUI);vue-cli

2. MyHeader中添加組件
複製到組件中, 根據條件添加 data數據npm


添加路由:
1. component中創建組件,
2. 在index.js中註冊組件 先導入組件, 有多少個註冊多少個組件, path:'/', name:'xxx', component:組件名
3. template中 標籤添加 :router="true"
4. app.vue中 添加 <router-view></router-view>element-ui


打包
npm run build

VUEX 組件通訊1. cd 到項目目錄,安裝 npm i vuex2. 不解耦: 導入/use/實例化/註冊 解耦: 新建store.js,導入vue,vuex/use/export, main.js導入,註冊

相關文章
相關標籤/搜索