从零创建一个Vue项目

63 阅读 0 评论 42 点赞

我是靠谱客的博主乐观缘分，最近开发中收集的这篇文章主要介绍从零创建一个Vue项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

https://www.cnblogs.com/ylboke/p/8393216.html Nodejs创建一个Vue项目

https://blog.csdn.net/zyb2017/article/details/79113286 Windows下Node安装与cli创建项目

https://www.jianshu.com/p/1626b8643676/ 命令

https://www.cnblogs.com/yanxulan/p/8978732.html

安装 vue步骤 https://www.jianshu.com/p/d501bd807a52

安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。

安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry=https://registry.npm.taobao.org）复制（这里要手动复制就是用鼠标右键那个，具体为啥不多解释），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。(安装淘宝镜像报错降低npm版本 npm install npm@4.6.1 -g 升级：npm install -g npm)

安装webpack：

npm install -g webpack //全局安装webpack
npm install webpack-cli -g //全局安装webpack-cli


//全局安装
npm install --save-dev webpack

两个同时安装，webpack -v才能检查到安装的版本。
安装vue脚手架：npm install vue-cli -g 或者 npm install -g @vue/cli 安装vue-router：npm install vue-router -g
node -v(小写v) ；如果没有显示node版本，先去官网下载安装node
vue -V(大写V) ；如果没有显示vue版本，npm i vue-cli -g 安装
webpack -v(小写v)；安装webpack就用 npm install webpack -g 再安装 npm i -g @vue/cli-init 不安装会提示安装的
通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here
安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。
yes no no no npm
Install vue-router? Yes (这里面安装了router 下面第10步可以不用)
cd 命令进入创建的工程目录，首先cd exprice（这里是自己的项目名字）；
安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。(注意如果 npm install 后 npm run dev 运行他人项目报错就需安装 vue 路由模块)
启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”，