Vue-cli 搭建web服務介紹

Node.js 之 npm 包管理

- Node.js 官網地址：點我前往官網

- Node.js 中文鏡像官網： 點我前往````

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
簡單來講，Node.js 是一個能夠用js來寫的前端的後端語言！！！

 

- npm介紹：

npm 等同於 python中的pip
能夠用來直接下載第三方的模塊和插件，
同時 npm 還有一個能夠很好的功能：
    能夠記錄項目中全部文件中所用到的依賴關係

- npm經常使用操做：

　　- 進入本身項目目錄 再執行下面的命令：

　　- npm init -y  ： 輸入-y 使用默認配置項生成 package.json 文件；生成包管理的初始配置文件，裏面會有不少選項，使用參數 -y 能夠選擇默認選項：

// package.json


{
  "name": "MySite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

// 參數解析：

　　// name  項目名字 中間不能有空格只能用小寫

　　// version  項目版本

　　// description   項目描述信息

　　// main  項目的入口文件

　　// scripts 指定命令的快捷方式 npm run test     test是scripts裏的鍵名 值爲具體命令

　　// author 做者

　　// license  許可證

　　// dependencies  生成環境依賴的包以及版本信息

　　// devDependencies  開發環境的依賴

 

　　- npm i jquery@0.0.0   簡寫install 爲 i 下載依賴  不寫@ 默認最新版本

　　- npm uninstall jquery  卸載依賴包

　　- npm update jquery   更新依賴包

　　- npm list  列出已安裝的依賴

　　- npm install webpack --D 保存爲開發環境依賴

　　- 老版本須要 --save 參數 如今不須要了

　　- 參數 -g 表明全局，將文件下載到全局；

　　- 項目目錄下會生成一個 node_modules 目錄。用npm下的包會在這個目錄下，全部的依賴信息放在package.json文件中，包括咱們全部的依賴以及版本；若是不當心刪掉 node_modules目錄，可使用 npm i  來下載全部依賴；

 

webpack模塊打包器

 - webpack 3 介紹：

webpack是一個模塊打包器，它將根據模塊的依賴關係進行靜態分析，
而後將這些模塊按照指定的規則生成靜態資源。
簡單點說，就是用來壓縮js代碼的

 

- 安裝：

// 依賴 npm 下載； 參數 -g 下載到全局
npm install webpack -g 

 

- 使用方法：

　　-- webpack  <要打包文件>  <打包後文件>     全局這種方式進行打包

　　-- npm install webpack   在本身的項目下 npm init 後在下載webpack 這就是局部安裝

　　-- node_modules/.bin/webpack <要打包文件>  <打包後文件>   項目裏要打包文件是入口文件

　　-- 路徑太長 太煩 能夠自定義命令  在package.json 文件的 scripts下面自定義

 

- 入口文件： entry； 出口文件： output

　　自定義命令的時候 命令太長了~~並且咱們命令太多的時候咱們須要每次都自定義多條命令~~

　　能夠把命令寫在webpack.config.js文件中~~

module.export = {
    // 全部的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}

//  運行命令
npm  run pack

webpack.config.js

 

- webpack 4的特性：

1, webpack不在單獨使用，須要webpack-cli

　　-- 全局安裝  npm install webpack webpack-cli -g -D

　　-- 局部安裝  npm install webpack webpack-cli -D

2, 增長了模式區分 （development, production）

　　--webpack --mode development/production 進行模式切換

　　-- development 開發者模式 打包默認不壓縮代碼

　　-- production  生產者模式 上線時使用，壓縮代碼。 默認是這個模式

3，固定入口目錄爲src，與入口默認文件index.js，打包後文件在新增的dist目錄下

　　-- 當只有一個入口文件也就是src/index.js時，無需增長webpack.config.js

4，多入口以及多出口：

entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}

 

vue-cli

 -- vue-cli 介紹（版本：2.0）：

vue-cli是官方提供的快速構建這個單頁面應用的腳手架。

根據官方文檔中的構件流程：

　　-- 前提是已經安裝了node.js 不然npm都用不了

　　-- 1，使用npm全局安裝vue-cli 

　　　　　　npm install -g vue-cli

　　-- 2, 安裝完成後在本身的項目目錄下

　　　　　　vue init webpack vue-demo  

　　　　輸入命令後進入安裝階段，須要用戶輸入一些信息 這裏省略了.....
　　　　添加 參數 -y 便可省略

　　-- 3，切換到咱們的項目目錄下 

　　　　　　cd vue-demo

　　　　　　npm run dev

目錄結構：

　　-- build 裏面是一些操做文件，使用npm run * 時其實執行的就是這裏的文件

　　-- config 配置文件，執行文件須要的配置信息

　　-- src 資源文件 全部的組件以及全部的圖片 都在這個文件夾下

　　-- node_modules  項目依賴包

　　-- static 靜態資源

　　-- package.json   依賴包的json文件

 

-- vue-cli （版本：3.0）特性：

1， 下載安裝：
   npm install -g @vue/cli

2， 建立項目：
    vue create xxxx

3， 目錄結構，以及配置文件：
    vue-cli3 目錄更加簡單
    手動在項目根目錄下建立  vue.config.js 裏面寫vue的配置信息

 

　　-- 目錄結構：