第一發筆記
自己看的同時希望可以幫到其他人.
Vue項目構建的方式我用過兩種
1. <script>標籤直接引入vue.js
2. 使用vue單文件組件
使用<script>直接引入的方式,這樣的項目存在很多缺陷只能使用一些基礎的API和侷限的功能,一般主要用於初級用戶和小型項目.
但是這次只使用第二種方法做示例來分享下vue項目的構建過程.
1.node環境
>node 就直接去這裏下載: http://nodejs.cn/
>安裝就一直下一步就好了
2.webpack工具
> 安裝webpack
cmd 命令 : npm install webpack -g (-g 就是安裝到全局 一般我都安裝在全局)
>安裝完後輸入 webpack -v 查看webpack版本 安裝好了就能看到版本了
3.vue-cli
>其實很簡單 就可以構建好示例項目了
npm install -g vue-cli (安裝腳手架)
vue init webpack project-name(創建項目 後面是要創建項目的名字,一路回車就好了)
cd project-name(就是cd到剛纔那建立的項目的文件夾裏面)
npm install(安裝依賴)
npm run dev(是運行這個項目)
4.文件夾結構大概就是這樣子
├── build // webpack/node配置文件│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config // 環境配置文件│ ├── dev.env.js│ ├── index.js│ └── prod.env.js├── node_modules // npm包文件├── src // 靜態資源文件│ ├── assets│ │ └── logo.png│ ├── components │ │ └── Hello.vue │ ├── router│ │ └── index.js │ ├── App.vue │ └── main.js├── static├── .babelrc // babel配置文件├── .gitignore // gitignore忽略文件├── .editorconfig // 編碼風格配置文件├── .postcssrc.js // postcss配置文件├── package.json // node包管理文件├── index.html // 首頁模板├── package.json // 包管理文件└── README.md // 描述文件