安裝

1、Visual studio code（VS code）

往期博客：https://www.cnblogs.com/technicist/p/12677052.html

2、Node.js與cnpm

往期博客：https://www.cnblogs.com/technicist/p/12683787.html

3、Vue/cli腳手架

往期博客：https://www.cnblogs.com/technicist/p/13373475.html

使用vue -V命令查看版本的時候，很有可能會報錯

報錯解決的往期博客：https://www.cnblogs.com/technicist/p/13293808.html

項目創建

在自己電腦本地磁盤新建一個文件夾，用于保存項目，文件夾命名最好使用英文名稱，

并進入到該文件夾，按住shift鍵不放，右擊選中Windows PowerShell，輸入vue create "項目名“ 命令,如下圖，我創建的項目名為vue2

回車后，進入如下界面，鍵盤上下鍵選擇需要的創建方法，這里選擇manuallyselect features,手動選擇配置的方式，然后回車

回車進入到如下界面，還是鍵盤上下鍵移動選擇需要的項，按 空格鍵可以選中。選項說明如下：

Babel：將ES6 編譯成ES5

TypeScript：     使用TypeScript

Progressive Web App (PWA) Support :        漸進式Web應用程序（PWA）支持

Router 和 Vuex：      路由和狀態管理

CSS Pre-processors：      css預編譯

Linter/Formatter：     代碼檢查工具

Unit Testing ：           單元測試

E2E Testing：            E2E測試

選擇完成后，按回車

路由使用歷史模式？這種模式充分利用history.pushState API來完成URL跳轉而無須重新加載頁面，這里填 y ，然后回車

使用什么css預編譯器？ 這里選擇Sass/SCSS (with node-sass)

選擇ESLint with error prevention only，回車

ESLint with error prevention only：  只進行報錯提醒

ESLint + Airbnb config：  不嚴謹模式

ESLint + Standard config：   正常模式

ESLint + Prettier：   嚴格模式

Pick additional lint features:代碼檢查方式，選擇Lint on save 保存時檢查，回車

選擇配置信息存放位置：單獨存放或者并入package.json

這里選擇 In dedicated configfiles

是否保存當前預設，下次構建無需再次配置

選擇 n ,回車 ，等待下載

出現如下信息，表示安裝成功

cd 項目名， 進入到項目的根目錄，

運行項目，輸入命令：npm run serve

瀏覽器 訪問：http://localhost:8080/ ，看到如下頁面表示項目創建成功

使用vs code 打開該項目，

vue-cli項目結構如下，其中src文件夾是需要掌握的，其他文件夾了解一下即可。

引入element

elementUI 官網：https://element.eleme.cn/#/zh-CN/component/installation

安裝指令：npm i element-ui -S

在項目main.js中引入element組件庫和element樣式文件

使用element

Vue.use(ElementUI);

注意，添加完成后，要按 ctrl + S 進行保存

在About.vue中添加如下代碼：

<template>

</template>

注意，添加完成后，要按 ctrl + S 進行保存

在命令行輸入： npm run serve 運行程序

在瀏覽器訪問：http://localhost:8080/about

vs code插件安裝

Vetur ：這個插件是 vscode 能優雅寫 Vue 的核心，代碼高亮，語法檢查等

Vue VSCode Snippets ：代碼補全

Element UI VSCode Snippets 、vscode-element-helper、vue-element-snippet、vue-element-sinppets、element UI Snippets： element的代碼提示

安裝插件步驟如下：

解決css屬性在html標簽里面不提示問題

設置 ->搜索prevent->把SnippetsPreventQuickSuggestions勾掉即可

如果是vue頁面，需要把vscode右下角的頁面模式選擇為 html即可

總結

以上是生活随笔為你收集整理的学习vue ，环境搭建（VS code、node.js、cnpm、vue-cli）创建项目 并引入element的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。