3、VUE的使用，以及環境的搭建

1、環境搭建

1.1 如何安裝npm

能夠經過終端安裝，可是我屢次嘗試不行。改用到官網下載安裝

https://nodejs.org/zh-cn/

安裝成功後再終端 輸入 npm -version
能夠看到 返回6.4.1 說明安裝成功

1.2 安裝cnpm

在終端輸入 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

但是發現報錯

deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
嘗試下降npm版本，仍是不行，最後嘗試直接用npm 安裝vue。

這裏解釋一下說明是cnpm，由於牆的問題，有時候npm會很慢，因此淘寶的鏡像cnpm，即中國的npm

1.3 安裝vue

sudo npm install -g vue-cli

而後輸入開機密碼

查看安裝是否完成 輸入 vue --version

返回2.9.6 安裝成功

 

2、vue腳本使用

2.1 建立工程

先到達想建立工程的文件夾，由於他會在當前文件夾下建立

lvxinjideMacBook-Pro:FirstVue lvxinji$ vue init webpack firstVueTest


//vue init webpack firstVueTest 
這句話就是建立工程， webpack表示的是使用的框架，firstVueTest表示工程名

? Project name first-vue-test     肯定工程名是first-vue-test
? Project description my first project 輸入工程描述
? Author XXX <XXXXXXXXXqq.com>  做者
? Vue build standalone  
? Install vue-router? No  是否安裝
? 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? (recom
mended) npm

   vue-cli · Generated "firstVueTest".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> fsevents@1.2.4 install /Users/lvxinji/Desktop/Demo/H5/VUEDemo/FirstVue/firstVueTest/node_modules/fsevents
> node install

[fsevents] Success: "/Users/lvxinji/Desktop/Demo/H5/VUEDemo/FirstVue/firstVueTest/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/lvxinji/Desktop/Demo/H5/VUEDemo/FirstVue/firstVueTest/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 1198 packages from 674 contributors and audited 8823 packages in 60.231s
found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

┌────────────────────────────────────────────────────────────┐
│                  npm update check failed                   │
│            Try running with sudo or get access             │
│            to the local update config store via            │
│ sudo chown -R $USER:$(id -gn $USER) /Users/lvxinji/.config │
└────────────────────────────────────────────────────────────┘

# Project initialization finished!
# ========================

To get started:

  cd firstVueTest
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack


lvxinjideMacBook-Pro:FirstVue lvxinji$

2.2 建立成果後 直接到文件夾查看

2.3 依賴下載

工程運行的時候 須要不少依賴 須要統一下載

到工程目錄下 在終端下輸入 sudo npm install

就會自動下載因此依賴，爲何會知道須要下載那些依然呢？

打開package.json能夠看到裏面的內容

{
  "name": "first-vue-test",
  "version": "1.0.0",
  "description": "my first project",
  "author": "xxx <xxxxxxxxx@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": { 這就都是依賴
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

因此他知道須要下載那些依賴

2.4 如何運行工程

在終端 到工程目錄下，輸入npm run dev.

看上圖 能夠看到 本地服務器已經運行

複製http://localhost:8080 到瀏覽器可見效果

1、vue的文件格式

vue有關HTML、js、css的代碼都寫在一個文件裏，後綴的.vue

2、如何打包

在跟目錄下npm run build

就能夠看看到一塔ditsh文件夾