《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli建立vue項目

簡介

《Asp.Net Core3 + Vue3入坑教程》 此教程適合新手入門或者先後端分離嘗試者。能夠根據圖文一步一步進操做編碼也能夠選擇直接查看源碼。每一篇文章都有對應的源碼

目錄

《Asp.Net Core3 + Vue3入坑教程》系列教程目錄

Asp.Net Core後端項目

1. 後端項目搭建與Swagger配置步驟
2. 配置CROS策略解決跨域問題
3. AutoMapper & Restful API & DI
4. EF Core & Postgresql
5. .Net Core 3升級成 .Net 5 & JWT
6. （暫未發表敬請期待...）異常處理與UserFriendlyException

Vue3 前端項目

1. （本文）使用vue-cli建立vue項目
2. （暫未發表敬請期待...）使用Ant Design of Vue編寫頁面 & vue-router 初試
3. （暫未發表敬請期待...）將Antd導航菜單與vue-router綁定
4. （暫未發表敬請期待...） 保存用戶登入狀態vuex初試

本文簡介

本文爲《Asp.Net Core3 + Vue3入坑教程》系列教程的前端第一篇 - 使用vue-cli建立vue項目，本文沒有特別內容，只是爲了保存系列教程的完整性。能夠直接參考官方文檔！

https://cli.vuejs.org/zh/guide/installation.html

異常處理與UserFriendlyException

官網下載並安裝VS Code

官網 https://code.visualstudio.com/

官網下載並安裝node.js

官網 https://nodejs.org/zh-cn/

官網下載並安裝 yarn

官網 https://yarn.bootcss.com/

所有安裝完畢以後建議重啓電腦

打開VS Code

打開文件夾（任意一個空文件夾，用來存放vue項目）

在VS Code 裏打開命令終端

在命令終端船窗口輸入命令

配置yarn淘寶鏡像

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

全局安裝vue-cli

yarn global add @vue/cli

使用vue-cli建立vue項目

vue create simple-vue

選擇配置

• Yes（前面已經安裝了淘寶鏡像這裏就不會出現此選項）
• Vue3
• Yarn
  

建立完成以後運行項目

cd simple-vue
yarn serve

總結

本文使用vue-cli建立simple-vue項目，下文將會使用Ant Design of Vue編寫頁面以及使用vue-router編寫路由

GitHub源碼

https://github.com/Impartsoft/Simple_Vue/tree/main/simple-vue

參考資料

vue-cli官方文檔 https://github.com/Impartsoft/Simple_Vue/tree/main/simple-vue