Vue基礎操做

開發環境搭建

　　在開始Vue項目前，須要搭建Vue的開發環境，具體操做過程以下

　　1.下載並安裝node.js，完成後在cmd中輸入path語句，看環境變量的路徑中是否有node.js，若是有則說明安裝成功

　　2.在cmd中輸入npm -v以及node -v，看是否有npm以及node的版本號，有的話說明node以及npm安裝成功

　　3.在須要添加vue項目的路徑下打開git bash

　　4.全局下安裝vue-cli（命令爲npm install --global vue-cli）

　　注意該命令是在國外的網站上下載內容，速度慢，能夠用淘寶的鏡像cnpm（命令爲npm install -g cnpm --registry=https://registry.npm.taobao.org）

　　5.建立基於webpack模板的新項目（命令爲vue init  webpack my-project）

　　其中除了vue-router選Y（yes），其餘的爲N（No）

　　6.進入my-project文件夾（cd my-project），npm install（安裝）再npm run dev（運行）

　　若是運行錯誤，能夠從新運行一次

　　7.最後能夠經過localhost:8080訪問建立的項目的初始頁面（若是非第一個，則端口號會從8080開始順次後排）

　　

 

項目結構

　　用webpack腳手架搭建的項目通常包含如下文件：

零散文件

　　README：項目的說明文件

　　package.json：開發時的第三方依賴包

　　package-lock.json：第三方依賴包的鎖文件，能夠用來確認依賴包的具體版本，從而保持團隊開發的統一

　　LICENSE：開源協議的說明

　　index.html：項目默認的首頁模板文件

　　postcssrc.js：postcss的配置項

　　gitignore：當上傳到git時，若是有特殊的文件不但願上傳，則在此處配置

　　eslintrc.js：一些代碼書寫的規範在此配置

　　eslintignore：說明哪些文件不接受eslintrc的代碼書寫規範的檢測

　　editorconfig：配置編輯器中的語法

　　babelrc：把咱們寫的代碼進行編譯，成爲瀏覽器能夠解析的代碼

目錄文件

　　static：放置靜態資源（模擬的JSON數據、圖片等）

　　node_modules：項目依賴的第三方的包

　　src：整個項目的源代碼

　　　　main.js：整個項目的入口文件

　　　　App.vue：整個項目最原始的根組件

　　　　router裏的index.js：項目中的全部路由

　　　　components：項目中須要用的小組件

　　　　assets：項目中用到的圖片資源

　　config：項目的配置文件

　　　　index.js：基礎的配置信息

　　　　dev.env.js：開發環境的配置信息

　　　　prod.env.js：線上的配置信息

　　build：項目中webpack打包的配置內容

　　　　webpack.base.conf.js：基礎的配置項

　　　　webpack.dev.conf.js：開發環境中的配置項

　　　　webpack.prod.conf.js：線上的配置項

 

路由配置

　　搭建完環境後，就能夠在編輯器中打開整個項目的文件夾了

　　其中咱們這裏能夠設置router文件夾下的index.js文件，配置路由（即經過某個路徑訪問到某個頁面）

　　其中@代指src文件夾

　　配置路由通常有兩種方法：

方法一

　　在router文件夾的index.js裏找到routes，添加一個新的對象項

　　其中component用來找書寫的頁面，屬性值爲require方法，內部爲路徑（因爲版本問題，可能會不支持）

　　代碼執行時，在路徑中輸入path的內容，就會把component中的內容渲染到頁面裏

　　

方法二

　　添加一個import，後跟一個自定義的名稱（如Demo1），再寫from，後跟該路由訪問的文件路徑

　　一樣在routes裏添加一個對象，component的屬性值寫一個自定義名稱（即import和from之間的自定義名稱）