vue脚手架安装流程

使用Vue脚手架创建Vue项目:

1,在当前文件夹对应的cmd窗口中进行以下操作

2,电脑已经安装过node.js

3,判断它是否安装成功

node -v # 查看node版本
npm -v # npm版本
4,安装Vue脚手架:每个电脑配置一次即可

直接使用npm,网速比较慢,使用淘宝镜像源提供的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm安装vue脚手架

cnpm install -g vue-cli

查看Vue脚手架版本

vue -V

创建VUE项目以及页面展示的基本流程

1,1. 初始化项目

vue init webpack vue01 # 在文件夹对应的cmd窗口使用, 输完回车

2. 接下来选择配置项目信息

? Project name (vue01) #项目名称 默认回车即可
? Project description (A Vue.js project) # 项目描述 默认回车即可
? Author # 作者 默认回车即可
Vue build (Use arrow keys) # 打包项目选项 默认回车即可
? Install vue-router? (Y/n) # 是否安装路由 输入y
? Use ESLint to lint your code? (Y/n) # 是否使用eslint检测代码, 输入n
? Set up unit tests (Y/n) # 是否使用测试单元 输入 n
? Setup e2e tests with Nightwatch? # 输入n
? Should we run npm install for you after the project has been created? (recommended)
Yes, use NPM # 是否使用npm包管理工具
Yes, use Yarn # 是否使用yarn包管理工具
❯ No, I will handle that myself # 不,我使用我自己的工具,想使用cnpm选第三个选项

3,进入项目文件夹,在终端安装必备的包

cd vue01 # 首先进入项目文件夹
cnpm install # 如果上面选的是第三个选项, 这一步是必须的,使用cnpm工具,安装一些必备的项目包,
# 如果上面选的是npm,这一步没必要,当然多运行一遍,也没问题

4,在终端运行项目

cnpm run dev # 两个命令任意一个即可,启动项目
npm run dev

5,在浏览器项打开项目

在浏览器的地址栏直接输入: http://localhost:8080

posted @ 2020-10-27 20:27  小范123  阅读(246)  评论(0编辑  收藏  举报