Vue 環境準備

近期接觸了下前端項目，記錄下學習過程。

近幾年前端發展的迅猛，各類框架層出不窮，vue react angular ，各類第三方組件

原來會點js，jQuery 先後端一我的全搞定了，如今先後端分離，後端主要提供接口，前端主要負責交互

對於我的來講會更專一本身的業務，固然對於企業來講會多了一我的力成本。

編輯器

　　通常都使用VSCode ,下載地址 https://code.visualstudio.com/ 很是簡潔，能夠靈活安裝一些插件。

• Vetur —— 語法高亮、智能感知、Emmet等
• EsLint—— 語法糾錯
• Auto Close Tag —— 自動閉合HTML/XML標籤
• Auto Rename Tag —— 自動完成另外一側標籤的同步修改
• Path Intellisense —— 自動路勁補全
• HTML CSS Support —— 讓 html 標籤上寫class 智能提示當前項目所支持的樣式
• Vue 2 Snippets ——vue的語法提示

node安裝

　　下載地址：http://nodejs.cn/download/

　　安裝步驟很簡單，只要一路「next」就能夠了。

　　安裝完成後，打開命令行工具輸入命令node -v，以下圖，若是出現對應版本號，就說明安裝成功了。

　　

　　npm包管理器，是集成在node中的，因此，直接輸入npm -v就會以下圖所示，顯示出npm的版本信息

　　

yarn 安裝

　　聽同事介紹說yarn比npm 快不少，也比較穩定，因此直接安裝yarn 

　　進入終端用npm安裝yarn

npm install -g yarn

　　切換淘寶鏡像（能夠切換本公司的鏡像）

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

　　下載項目，並啓動

//下載項目
git clone git@xxxx
//安裝依賴
yarn
// 啓動項目
yarn serve 

項目的結構介紹

• public：存放靜態文件
• src：源碼文件，開發就在此目錄下
• .gitignore：git的配置文件
• babel.config.js：babel的配置文件，在建立項目的時候採用的腳手架爲bable
• package-lock.json：定義了依賴庫的下載位置，保證了在項目遷移部署環境的一致性。
• package.json：定義了該項目依賴的類庫

 

yarn和npm命令對比

初始化            yarn init                          npm init 
安裝依賴          yarn install 或者 yarn              npm install pnpm install
新增依賴          yarn add element-ui                npm install element-ui --save pnpm i element-ui
刪除依賴          yarn remove element-ui             npm uninstall element-ui --save …
更新依賴          yarn upgrade                       npm update pnpm update

更多命令查看：https://yarn.bootcss.com/

 

這樣環境基本就搭建好了。

後面有時間再說說語法。

 

沒接觸以前感受不會用，未知領域老是以爲好厲害好高深的樣子，環境搭建好，瞭解下基本語法基本就能上手項目了。

先邁出第一步。

 

相關連接：

Vue官網

eleme組件