使用vue创建项目
1.使用 npm install -g @vue/cli 全局安装vue
2.使用 vue -V 查看当前版本号
1.1 输入命令 vue create 项目名字
第一个放独立文件夹，第二个放package.json
7.填写项目描述
不用写。
8.CD到创建的项目文件夹里运行 npm run serve
vue项目完整搭建步骤
为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。
下载并安装node
下载地址为：
在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。
检查node是否安装成功
为了更快安装，可以使用淘宝的镜像：
在终端输入以下命令：
检测cnpm是否安装成功
vue-cli是vue脚手架工具，方便打包，部署，测试等。
进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名
进入项目
安装依赖
此时项目中会多了一个node_modules
启动成功
使用VUE搭建H5项目
最近开发一个h5项目，项目使用的vue2.0+vant
主要有以下几步
1、使用vue-cli创建项目
2、引入vue-router
3、引入vuex及vuex-persistedstate
4、引入vantui
5、引入sass
6、引入flexible
7、引入postcss-pxtorem
8、引入axios
9、配置开发生产测试环境参数
10、引入其他相关库，例如moment、lodash等
vue-cli起项目步骤
一、 安装 node.js
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
二、安装webpack
命令：npm install webpack -g
安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。
三、安装 vue-cli
命令：npm install -g vue-cli
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本
四、使用vue-cli来构建项目
1、在硬盘中找一个放项目的文件夹
2、在文件夹下打开命令盘，输入命令
Vue-Project是我们自己设置的项目名称，项目名称不能用中文
命令：vue init webpack Vue-Project
3、进入项目工程目录
4、安装项目所需依赖 npm install
5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
命令：npm install vue-router vue-resource --save
创建完成的项目目录，如下图
各个目录的作用
最后一步启动项目
命令：npm run dev
启动成功，打开浏览器8080窗口，页面如图所示
关于vue create 和vue init webpack的区别 ？
vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
或
另一种：
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
