vue-01:从零基础快速搭建vue项目
从零基础快速搭建vue项目
参考博客:咸鱼最牛逼
地址:https://blog.csdn.net/panchang199266?utm_source=feed
一、环境搭建
1、安装node.js
node下载地址:https://nodejs.org/en/download/
安装成功后在cmd输入node -v查看安装的版本,能看到对应得版本号,则说明安装成功!
2、安装npm
使用淘宝镜像安装 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装vue-cli脚手架
官方网站介绍:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具:
cnpm install --global vue-cli //(此命令只需要执行一次)
4、安装最新vue-cli脚手架
升级Vue Client3.0:
先将自己安装的vue-cli卸载:
npm uninstall vue-cli -g
安装最新的vue-cli:
cnpm install -g @vue/cli
5、vue-cli3.0新建项目方式
a 、 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就好;下面选择手动
b、用视图创建项目 vue ui
详情请参见博客:https://blog.csdn.net/zhumany_csdn/article/details/82910656
二、新建项目
1、新建一个文件夹vueProject
自行操作
2、在新建文件夹下进入cmd,执行一下命令
#创建项目 my-demo01
vue init webpack my-demo01
依次输入项目名称,介绍,已经作者信息:
选择运行+编译还是仅仅是运行构建方式:
是否下载vue-route路由,项目肯定是需要:
是否是否eslint来检测你的代码格式和语法,推荐no:
eslint介绍:1.审查代码是否符合编码规范和统一的代码风格;2.审查代码是否存在语法错误;
eslint审查代码十分严格,不推荐新手使用,多一个空格可能都会报错,你是大神那就另说!!!!
是否需要添加测试:默认不需要,本地编译成功即可查看效果
vue-cli 自动化测试 Nightwatch 详解:https://www.itcodemonkey.com/article/8422.html
选择是否以某种方式下载依赖:
开始编译:
3、下载vue项目依赖
参考上一步操作,
4、运行项目
进入项目的根目录下执行
cnpm run dev
5、浏览器查看
http://localhost:8080/#/
如果你能看到这个页面,恭喜你,已经成功搭建一个简单的vue项目!!!!!!!