今天想了解一下vue開發(fā)相關的東西，就動手搭建了一些開發(fā)環(huán)境。
下面是我安裝和配置的相關過程。（Mac系統(tǒng)）
下載安裝nodejs 6.11.4 (包含 npm 3.10.10)
安裝完成后，命令行升級一下npm
$ npm install npm@latest -g
$ npm -v
5.5.1
權限設置
$ npm config get prefix
/usr/local
$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
npm config get prefix是用來找到npm的目錄
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}給當前用戶讀寫npm相關目錄的權限。
安裝webpack和vue-cli
$ npm install webpack -g
$ npm install vue-cli -g
$ npm list -g --depth=0
/usr/local/lib
├── create-react-native-app@1.0.0
├── es-checker@1.4.1
├── npm@5.5.1
├── vue-cli@2.9.1
└── webpack@3.8.1
創(chuàng)建工程
$ cd your_workspace_folder
$ vue init webpack projectname
比如我的工程名為vueStart，輸入的地方?jīng)]有什么需求直接回車就行了。
$ vue init webpack-simple vueStart
? Project name vuestart
? Project description A Vue.js project
? Author tomfriwel <xxx@xx.com>
? Use sass? No
vue-cli · Generated "vueStart".
To get started:
cd vueStart
npm install
npm run dev.
這里注意的是，如果用vue init webpack-simple projectname，之后npm run dev是運不起來的。所以這里用的webpack而不是webpack-simple
這里的vue init webpack和npm install webpack不一樣
vue init webpack是安裝webpack模板（也可以是以下列出的一些模板webpack-simple/browserify...）
具體信息可以查看vuejs-templates/webpack
還有，如果想要在當前文件夾創(chuàng)建工程，而不是新建一個文件夾，那么可以使用$ vue init webpack-simple .，把工程名改為英文的點（.）就可以了。 How to init in current folder? #24
一些可用的模板
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.
- pwa - PWA template for vue-cli based on the webpack template
- simple - The simplest possible Vue setup in a single HTML file
配置工程
進入創(chuàng)建的工程目錄
$ cd vueStart/
$ npm install
npm install后就會安裝一些亂七八糟的東西。
安裝 vue 路由模塊vue-router和網(wǎng)絡請求模塊vue-resource，這兩個如果用不到也可以不用裝。
$ npm install vue-router vue-resource --save
+ vue-resource@1.3.4
+ vue-router@3.0.1
added 17 packages in 6.541s
--save的作用
運行和構建
$ npm run dev
沒什么問題的話，打開頁面是這樣的
對.vue更改后，頁面也會自動更新，挺方便的。
開始編寫
src文件夾目錄
src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
└── main.js
這里App.vue引用了一個叫HelloWorld的組件。我們對HelloWorld組件進行更改。
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'First modify.'
}
}
}
</script>
保存后
發(fā)布
執(zhí)行
$ npm run build
完成后會生成一個dist文件夾
dist
├── index.html
└── static
├── css
│ └── app.86d25fd679f2d9f5bee9162ae7804b46.css
└── js
├── app.bcbf2665a80fe0bdc316.js
├── app.bcbf2665a80fe0bdc316.js.map
├── manifest.f9cc8df0a9bc12617260.js
├── manifest.f9cc8df0a9bc12617260.js.map
├── vendor.5edf78e409459ac3ccd1.js
└── vendor.5edf78e409459ac3ccd1.js.map
如果是想本地運行而不是放到服務器上，需要對config/index.js進行一個小更改。將build中的assetsPublicPath改為./，不然會找不到資源，最后再次npm run build，就可以直接瀏覽器打開dist文件夾下的index.html了。
...
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
...
Tips
npm run build和npm run dev其實是運行的package.json里scripts的對應的腳本。例如我的
...
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js"
},
...
可以自己測試一個
...
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js",
"test": "echo 123"
},
...
然后運行npm run test看看結(jié)果。
相關參考
Installing Node.js and updating npm
Fixing npm permissions
Vue2.0 新手完全填坑攻略——從環(huán)境搭建到發(fā)布
What is the --save option for npm install?
Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目
基于vue-cli快速構建
npm scripts 使用指南
vuejs/vue-cli
