这里只精品,99婷婷插在线

安裝node.js

到 node.js 官網(wǎng)下載復(fù)合自己開(kāi)發(fā)平臺(tái)的 Node 版本

nodejs中文網(wǎng)

安裝npm

設(shè)置下載鏡像

# 修改鏡像地址
npm install --registry=https://registry.npm.taobao.org
# 安裝cnmp
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

安裝webpack

# -g 參數(shù)表示全局安裝
# 安裝 webpack
npm install webpack -g
# 安裝 webpack-cli
npm install webpack-cli -g
# 檢驗(yàn)是否安裝成功
# 查看webpack的版本號(hào)
webpack -v

安裝vue

npm install vue

安裝vue-cli

#全局安裝vue-cli
npm install --global vue-cli
# 也是全局安裝vue-cli
cnpm install vue-cli -g

vue 項(xiàng)目初始化

# 切換到你的項(xiàng)目目錄(例如: /home/project)
# (OS: Linux)
cd  /home/project
# (OS: Windows)
cd \G\NodeProject
# 項(xiàng)目初始化(例如:項(xiàng)目名為demo1)
G:\NodeProject>vue init webpack demo1
# 項(xiàng)目名稱
? Project name demo1
# 項(xiàng)目描述
? Project description A Vue.js project
# 項(xiàng)目作者
? Author zhifan <gong_zhi_fan@163.com>
# vue 構(gòu)建方式
? Vue build standalone
# 安裝 vue-router
? Install vue-router? Yes
# 是否需要js語(yǔ)法檢測(cè)
? Use ESLint to lint your code? No
# 是否安裝單元測(cè)試工具
? Set up unit tests No
# 是否需要端到端的測(cè)試工具
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "demo1".


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

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/chalk failed, reason: connect ETIMEDOUT 104.16.17.35:443
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\captain\AppData\Roaming\npm-cache\_logs\2020-03-12T04_10_38_779Z-debug.log

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

To get started:

  cd demo1
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

項(xiàng)目運(yùn)行起來(lái)

PS 1 : 關(guān)于 npm 和 cnpm 都是Node.js 的包管工具 ,但是cnpm就是國(guó)內(nèi)版的npm,因此包的下載速度更快,用npm 命令的地方我們都可以用cnpm,效果是一致的

PS 2 : npm 有哪些命令我們可以通過(guò) npm -h 查看或者通過(guò) npm <command> -h 具體查看某個(gè)命
G:\NodeProject\demo1>npm install -h

npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>

aliases: i, isntall, add
common options: [--save-prod|--save-dev|--save-optional] [--save-exact] [--no-save]

# 進(jìn)入項(xiàng)目目錄中
# 安裝依賴包 (npm install 或者 cnpm install 或者 npm i) 
G:\NodeProject\demo1>cnpm i
# 啟動(dòng)項(xiàng)目
G:\NodeProject\demo1>npm run dev

> demo1@1.0.0 dev G:\NodeProject\demo1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 33/37 modules 4 active ...t\demo1\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 3719ms                                                                                                                                             下午2:03:21

 I  Your application is running here: http://localhost:8080

安裝 vue-router

npm install vue-router

安裝 axios

npm install axios

安裝Element UI

npm i element-ui -S

VUE項(xiàng)目跨域

cors 全稱為 Cross Origin Resource Sharing（跨域資源共享）

跨域問(wèn)題是前端項(xiàng)目經(jīng)常遇到一般的解決方案:

開(kāi)發(fā)環(huán)境: 使用webpack的 proxy

生產(chǎn)環(huán)境: 使用nginx做反向代理

使用場(chǎng)景如下:

本地開(kāi)發(fā)環(huán)境的 vue項(xiàng)目地址是 http://127.0.0.1:8080

vue項(xiàng)目的很多數(shù)據(jù)都是后端接口提供的,假設(shè)后端接口地址是 http://192.168.80.90:8090

vue項(xiàng)目中的登陸請(qǐng)求在項(xiàng)目中的請(qǐng)求是 http://127.0.0.1:8080/dev-api/user/login 但是實(shí)際需要訪問(wèn)的后端接口是 http://192.168.80.90:8090/user/login 才能獲取登陸信息,包括很多vue前端項(xiàng)目需要從單獨(dú)的后端接口獲取數(shù)據(jù)的場(chǎng)景

如下是一個(gè)vue項(xiàng)目的配置文件的關(guān)于代理部分的配置內(nèi)容

 devServer: {
    proxy: {
      '/dev-api': {
       // 后端接口地址
        target: 'http://192.168.80.90:8090/',
       // 允許跨域
        changeOrigin: true,
       // 路徑重寫(根據(jù)自己實(shí)際情況調(diào)整)
       // 例如
       // vue 中的請(qǐng)求路徑是 http://127.0.0.1:8080/dev-api/user/login
       // 代理后實(shí)際請(qǐng)求路徑是 http://192.168.80.90:8090/user/login
        pathRewrite: {
          '^/dev-api': ''
        }
      }
    }
  },

VUE項(xiàng)目線上部署

vue 項(xiàng)目開(kāi)發(fā)好了之后,在項(xiàng)目目錄下執(zhí)行 npm run build 命令打包, 打包好的項(xiàng)目一般放在vue項(xiàng)目的 dist文件中

dist 文件夾是打包的默認(rèn)輸出文件夾(可以在配置文件中配置)

通常前端開(kāi)發(fā)將項(xiàng)目打包好之后就可以在服務(wù)器上部署了

部署的時(shí)候通常使用 Nginx 做反向代理

nginx 配置文件簡(jiǎn)單示例

vue_nginx.conf

server{
  # 監(jiān)聽(tīng)的端口
  listen 19000;
  # 使用域名,沒(méi)有域名使用 _ 標(biāo)識(shí)
  server_name _;  
  # 項(xiàng)目根路徑
  root  /var/wwwroot/rms2/dist;  
  location / {
    # http_core核心模塊所帶的指令，主要是能替代一些rewrite的指令，提高解析效率
    try_files $uri $uri/  /index.html;   
  }
  location /prod-api {
    # 重寫 break表示重寫之后會(huì)停止后續(xù)的重寫規(guī)則
    # 例如 : 
    # 看到前端請(qǐng)求是 http://192.168.10.90:19000/pro-api/user/login
    # 重寫后的請(qǐng)求是 http://192.168.10.90:19000/user/login
    rewrite "^/prod-api/(.*)$" /$1 break; 
    # proxy_pass 反向代理
    # 此處的作用是vue前端項(xiàng)目中需要訪問(wèn)的實(shí)際后端接口地址
    # 例如 : 
    # 前端的請(qǐng)求 http://192.168.10.90:19000/pro-api/user/login
    # 實(shí)際后端接口請(qǐng)求 http://200.100.10.1:8080/user/login
    proxy_pass http://200.100.10.1:8080;
  }
}