vue-cli3.0搭建腳手架及關閉嚴格模式
vue的更新可以說是非常快的了。
目前vue的最新版本是2.6，vue-cli最新是4.x
一:用vue-cli3.x來寫項目
我們是基於node進行創建的，所以說我們要先安裝node,我們可以參考node的官網：：https://nodejs.org/en/download/
1.1 安裝vue-cli
npm install -g @vue/cli在這裏插入代碼片
1.2 創建項目
vue create demo//vue create 項目名
1.3：手動安裝：
在這裏我們選擇後者 ，手動安裝：
? Please pick a preset:
❯ default (babel, eslint) //回車自動安裝腳手架需要的各種包
Manually select features //手動安裝，需要自己配置選擇各種要安裝的包
1.4詳細的創建步驟
1.5 進入目錄
cd demo
1.6 啓動服務：
npm run serve
二：配置跨域請求：
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
三：手機測試項目：
注意：我們一定要保證手機跟我們的電腦在同一個WiFi下，
、運行項目：npm run serve
查找到項目所在電腦的ip地址：
App running at:
- Local: http://localhost:9999/
- Network: http://192.168.4.162:9999/ //手機上可以訪問的
四：手機端適配：
手機端適配的方法有很多：rem,彈性盒子（flex）,百分比，媒體查詢，vw，vh
我們推薦使用rem佈局。
rem佈局：動態js計算：
<script>
function rem() {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 15 + 'px'
}
rem();
window.onresize = rem;
</script>
五：目錄結構介紹:
.
├── 'node_modules' // npm下載包都在這個文件夾
├── 'public' //我們主要是用來存放json數據，靜態資源等
│ ├── 'favicon.ico'
│ └── 'index.html' // 作爲入口模板,最後打包文件所在地，也是main,js 綁定的 dom
├── 'src' // 整個工程文件目錄 （入口文件）
│ ├── 'api' // 創建用來管理接口的文件夾
│ │ └── 'index.js' // axios 入口使用
│ ├── 'assets' // 靜態資源管理負責管理圖片文字一類的
│ │ ├── 'font' // 存放字體庫文件夾
│ │ └── 'img' // 存放圖片的文件夾
│ ├── 'components' // 存放組件文件夾
│ │ └── 'HelloWorld.vue' // 這是一個名叫HelloWorld.vue組件
│ ├── 'config' // 項目配置的文件夾
│ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包
│ ├── 'router' // 路由相關
│ │ ├── 'index.js' // 利用node 找包特性 起名index.js
│ │ └── 'router.js' // 路由配置
│ ├── 'store' // Vuex狀態管理文件夾
│ ├── 'views' // 視圖組件 和 公共組件
│ │ ├── 'About.vue'
│ │ └── 'Home.vue'
│ ├── App.vue // 由於render 特性 所以需要一個被渲染的vue文件
│ ├── main.js // 項目入口，文件打包會找這個文件，並且將這個文件的內容打包
├── .browserslistrc //目標瀏覽器配置表
├── .editorconfig // 編輯器配置
├── .gitignore // 忽略用git提交省略的提交目錄
├── babel.config.js // 高級語法轉低級語法
├── package.json
├── package-lock.json // 鎖版本包
├── postcss.config.js //CSS預處理器
├── README.md
└── vue.config.js // 項目自定義配置
六：移除嚴格模式：
我們在在執行了上面的一系列操作可以發現，嚴格模式真的太讓人生氣，甚至說是我們註釋了一個代碼，我們必須要先有兩個空格。聲明函數時候，函數名和小括號必須要空格，頁面中的引用哦度要用單引號等！寫起來太氣人 ，給大家分享一個 簡單的方法：
那麼今天的分享就到這裏了，歡迎大家 隨時補充~