1. 程式人生 > >啟動一個Vue專案

啟動一個Vue專案

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.html

? 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

5. 專案啟動 npm run dev


目錄結構:
build: 出口檔案,webpack配置檔案
src: 工作目錄 main 主入口檔案
index.js: 註冊元件


component 建立元件,
app.vue 中註冊

重啟專案 需要cd 進入自己建立的專案下 然後 npm run dev


使用element-ui

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

2. MyHeader中新增元件
複製到元件中, 根據條件新增 data資料


新增路由:
1. component中建立元件,
2. 在index.js中註冊元件 先匯入元件, 有多少個註冊多少個元件, path:'/', name:'xxx', component:元件名
3. template中 標籤新增 :router="true"
4. app.vue中 新增 <router-view></router-view>


打包
npm run build


VUEX 元件通訊
1. cd 到專案目錄,安裝 npm i vuex
2. 不解耦: 匯入/use/例項化/註冊
解耦: 新建store.js,匯入vue,vuex/use/export, main.js匯入,註冊