vue安裝及使用教程

學習資源

vue菜鳥教程
vue官方文檔

這裏說明一下，vue有兩種用法，第一種是單純網頁使用，只需要引入相關腳本即可使用：

<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>

在這裏我們配合使用iview的UI組件庫（https://www.iviewui.com/docs/guide/install），iview也有兩種用法，第一種是直接在網頁使用，參考https://www.cnblogs.com/ihuangqing/p/10849241.html，第二種是template方法使用，這個教程較多，官網教程也是這個方法。

vue第二種方法就是構建大型應用，webAPP，這個教程較多，參考上述教程即可。

最後安裝nodejs等可以參考博客：https://blog.csdn.net/qq_45467083/article/details/104372999

安裝vue

參考搭建一個VUE項目
其他參考：Vue的安裝及使用快速入門、vue 安裝教程（自己安裝過程及遇到的一些坑）

Project name my-project               --項目的名稱，直接默認回車
Project description A Vue.js project  --項目描述，直接默認回車
Author syf                            --作者姓名，輸入名字（syf）回車
Install vue-router? Yes               --是否安裝路由，輸入y回車
Use ESLint to lint your code? No      --是否用ESLint規範代碼，輸入n回車
Set up unit tests No                  --是否需要單元測試，輸入n回車
Setup e2e tests with Nightwatch? No   --是否需要單元測試，輸入n回車

注：
eslint是一個JavaScript的校驗插件，通常用來校驗語法或代碼的書寫風格。（vue項目關閉eslint校驗）

目錄結構及hello world

參考https://www.runoob.com/vue2/vue-directory-structure.html

vscode 與 vue

使用VSCode配置簡單的vue項目

VSCode關於VUE的插件配置
VsCode從零開始配置一個屬於自己的Vue開發環境

vue指令彙總

vue init webpack vue_app //生成工程

npm run build //打包生成html、js文件

npm run dev //開啓端口，可以用瀏覽器訪問
//訪問結束後Crtl+c結束

注：使用npm run build打包文件注意修改這裏