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项目！！！！！！！

 

三、项目目录结构