使用腳手架創建vue項目

安裝node(這是最基礎,安裝了node,才能使用npm)

node 安裝完畢

npm 提速(非必須)

淘寶鏡像  npm install -g cnpm --registry=https://registry.npm.taobao.org        國內npm鏡像 假如你是用npm 慢的話就用這個,否則不用下載

這時候出現這段話,把下面的 這個 "D:\Develop\nodejs\node_global" 假如到環境變量,不然的話  cnpm  run dev 是找不到命令的,包括下載所有包

 

安裝 webpack  -->打包工具 (非必需,建議還是了解一下,這個是啥,干嘛用的)

cnpm install webpack -g

 vue-cli 與webpack 的關系

 vue-cli是什么：vue-cli是vue的命令行工具，只要按照官網敲幾行命令就可以新建一個基本的vue項目框架。方便快捷。

vue-cli和webpack是什么關系：vue-cli 里面包含了webpack， 並且配置好了基本的webpack打包規則

 如果你在學習vue 之前,學習下webpack,容易理解  vue-cli 中的webpack 規則

Vue學習之webpack實踐

 

安裝vue腳手架  -->會生成一些基礎的 必須的js 文件 (類似幾個有控制器的mvc應用)(vue腳手架跟webpack 無關聯)

cnpm  install @vue/cli -g  --這樣會是最新版本

cnpm install -g @vue/cli-init  -g   --安裝vue cli2

查看版本: vue -V  ( 默認出現最新版腳手架) 就算你安裝了 腳手架2 它顯示的也是最新版本

 

 

創建項目: 注意文件夾位置

 

使用腳手架創建項目

vue init webpack VueBlog    --> vue 腳手架2版本

vue create webpack VueBlog  --> vue 腳手架3版本

 

創建時截圖

 

 vue cli3 腳手架創建文件

 

腳手架頁面版本創建項目 (vue 腳手架3以上版本才有)  

命令 vue ui

 

 

 然后運行 

 

 

npm run start

 

 

 

 注意

我在使用腳手架2創建項目的時候,遇到了一個坑

部分代碼:import Vue from 'vue'

import Router from 'vue-router' const Home = () => import("../views/home/home") const Cart = () => import("../views/cart/cart") const Profile = () => import("../views/profile/profile") const Category = () => import("../views/category/category") Vue.use(Router) const routes = [ // {
  // path: "/home",
  // component: Home 
 // },
<!--  
 上面跟下面的路由規則 就是在path 這里 填了'/home'與不填 '' 的問題,我填了 '/home' 然后點擊 ,會出現 /home 路由器沒有值 ,其他路由有值得情況,假如我把'/home' 為空,就沒有問題了
 而這個問題好像就是在腳手架2 中才會有 
  -->

 { path: "", component: Home }, { path: "/cart", component: Cart } , { path: "/category", component: Category }, { path: "/profile", component: Profile } ]