Vue入門學習日記（一）

1、環境搭建：

1. 安裝Nodejs

官網下載後，輸入node -v 查看node版本號

2. 安裝淘寶鏡像cnpm或者yarn

打開終端，設置淘寶 npm 鏡像，輸入：

npm config set registry https://registry.npm.taobao.org

         或者：npm install -g cnpm --registry= https://registry.npm.taobao.org

安裝完後輸入 cnpm -V 查看版本號

3. 全局安裝 vue-cli

cnpm install -g vue-cli （在mac上出現錯誤時嗎，加上sudo）

安裝後輸入 vue -V查看版本號

 

2、構建項目：

1.初始化項目

vue init webpack gshop

# vue init 是vue初始化項目
# webpack 是打包工具，其中也能夠使用Browserify，感興趣能夠自行研究
# project 是自定義的項目名稱

cd gshop

npm install

npm run dev

 

執行命令時會顯示下列選項：

$ vue init webpack project--------------------- 安裝vue腳手架的命令，採用webpack打包工具，項目名是project
This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------項目名稱
? Project name project
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author wujy--------------------- 項目建立者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，推薦安裝，是頁面跳轉用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則，這裏我的建議選no，由於這裏有不少的坑，具體之後會講
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安裝單元測試，因人而異，能夠自行選擇
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安裝e2e測試，可自行選擇
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 這裏說明如何啓動這個服務
cd project   --------------------進入項目文件夾
npm install      ---------------------安裝依賴，推薦使用淘寶鏡像cnpm
npm run dev  -----------------------項目運行

2.運行項目

cd project ------進入工程目錄

cnpm install -----安裝包依賴

cnpm run dev ----運行項目（或者cnpm start）

打開chorme 輸入 http://localhost:8080

 

3.打包，用於正式環境

cnpm run build

 

3、文件目錄分析

build    -------------------項目構建相關代碼（webpack配置）
    build.js  -------------生產環境構建代碼
    check-versions.js  ----------檢查node、npm等版本
    utils.js  ------------------------構建工具相關
    vue-loader.conf.js  ---------css加載器的配置
    webpack.base.conf.js  ---webpack的基礎配置信息
    webpack.dev.conf.js  -----webpack開發環境配置信息，構建開發本地服務器
    webpack.prod.conf.js  ---wenpack生產環境配置信息
config    -------------------配置目錄，包括端口號，打包輸出等的vue基本配置文件
    dev.env.js  -----------開發環境變量
    prod.env.js -----------生產環境變量
    index.js  -------------項目的配置變量，端口號等 
node_modules    -----------加載的項目依賴模塊
static    -------------------靜態資源目錄
index.html    ---------------首頁的入口文件，能夠添加meta等參數
README.md    ---------------項目的說明文檔，makedown格式
src    -----------------------源碼目錄，主要的開發
    assets  ---------------靜態資源，css,image等能夠存放
    components  -----------公共組件
    router  ---------------路由文件夾，配置頁面跳轉
    views  ----------------頁面編寫的地方，（能夠自行定義命名）
main.js  ------------------入口文件，全局的配置和加載
.babelrc  -----------------ES6語法編譯配置，用來將es6代碼轉換成瀏覽器可識別的es5代碼
.gitignore  ---------------git上傳須要忽略的文件的格式
package.json  -------------項目的基本信息，包括開發所須要的模塊、項目名稱、版本號等
.postcssrc.js  ------------轉換css的工具
.editorconfig  ------------定義代碼格式

備註：

強制清除 npm包緩存 npm cache clean --force 

須要package.json才能npm install