vue项目搭建
-
- 一、 创建准备
-
- 1.node
- 2. npm
- 3.淘宝镜像
- 二、创建项目
-
- 1.创建指令
- 2.项目目录
一、 创建准备
巧妇难为无米之炊，首先需要下载项目创建的工具,前端开发必需的两个工具。
1.node
-
node.js 官网地址
由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。
安装时勾选全部组件。
shift+右键，在此处打开命令窗口
输入node -v 查看版本号
2. npm
-
npm 官网地址
npm是包管理工具，类似于一个应用商城，项目开发所用的模块在这里集中管理，使用方便。一般安装node.js时已经自动安装。
shift+右键，在此处打开命令窗口
输入npm -v 查看版本号
要确保这两个工具正常运行。
3.淘宝镜像
-
淘宝镜像 官网地址
npm是外网工具，因此对于很多不能翻墙的用户来说，下载依赖可能会比较慢，淘宝镜像是国内公司复刻npm的镜像，方便用户快速下载依赖。
打开命令窗口安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、创建项目
万事具备，只欠东风。
1.创建指令
-
vue.js 官网地址
vue官网有非常详细的使用教程！
打开命令窗口，依次输入。
cnpm i vue-cli -g 、、、 官方脚手架 ，稍等安装完毕再执行下面。
vue init webpack mypro 、、、mypro是创建的项目名称。
项目创建选项中 ESLint 是严格模式，代码规范比较严厉，新手不适应。
cnpm i 、、、安装项目的所有依赖
cnpm run dev 、、、启动项目。
在浏览器中输入：http://localhost:8080/
就可以看到你的项目了
2.项目目录
build：打包压缩文件，项目上传用。（一般不用）
config：配置文件。（一般不用）
node_modules：项目依赖文件。（不用）
src：项目开发主要文件。（最重要，里面文件项目开发时说。）
test：测试用的文件。（一般不用）
基本上创建一个项目流程就这样，不明白的可以问（针对新手，大佬自动飘过，哈哈）