使用脚手架创建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 } ]