vue之项目创建，脚手架搭建。（一）

偏执的太偏执、 2022-03-01 10:24 265阅读 0赞

### vue项目搭建 ###

*   *  一、 创建准备
     *   *  1.node
         *  2. npm
         *  3.淘宝镜像
     *  二、创建项目
     *   *  1.创建指令
         *  2.项目目录

## 一、 创建准备 ##

> 巧妇难为无米之炊，首先需要下载项目创建的工具,前端开发必需的两个工具。

### 1.node ###

*  [node.js 官网地址][node.js]  
    由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。  
    安装时勾选全部组件。

> shift+右键，在此处打开命令窗口  
> 输入node -v 查看版本号

### 2. npm ###

*  [ npm 官网地址][npm]  
    npm是包管理工具，类似于一个应用商城，项目开发所用的模块在这里集中管理，使用方便。一般安装node.js时已经自动安装。

> shift+右键，在此处打开命令窗口  
> 输入npm -v 查看版本号

要确保这两个工具正常运行。

### 3.淘宝镜像 ###

*  [淘宝镜像 官网地址][Link 1]  
    npm是外网工具，因此对于很多不能翻墙的用户来说，下载依赖可能会比较慢，淘宝镜像是国内公司复刻npm的镜像，方便用户快速下载依赖。

> 打开命令窗口安装:  
> npm install -g cnpm --registry=https://registry.npm.taobao.org

## 二、创建项目 ##

> 万事具备，只欠东风。

### 1.创建指令 ###

*  [vue.js 官网地址][vue.js]  
    vue官网有非常详细的使用教程！  
    打开命令窗口，依次输入。

> cnpm i vue-cli -g 、、、 官方脚手架 ，稍等安装完毕再执行下面。  
> vue init webpack mypro 、、、mypro是创建的项目名称。

项目创建选项中 ESLint 是严格模式，代码规范比较严厉，新手不适应。  
![vue创建项目选项][vue]

> cnpm i 、、、安装项目的所有依赖  
> cnpm run dev 、、、启动项目。  
> 在浏览器中输入：[http://localhost:8080/][http_localhost_8080]  
> 就可以看到你的项目了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]

### 2.项目目录 ###

build：打包压缩文件，项目上传用。（一般不用）  
config：配置文件。（一般不用）  
node\_modules：项目依赖文件。（不用）  
src：项目开发主要文件。（最重要，里面文件项目开发时说。）  
test：测试用的文件。（一般不用）  
![vue项目目录][vue 1]

> 基本上创建一个项目流程就这样，不明白的可以问（针对新手，大佬自动飘过，哈哈）

[node.js]: https://nodejs.org/en/
[npm]: https://www.npmjs.com/
[Link 1]: https://npm.taobao.org/
[vue.js]: https://cn.vuejs.org/
[vue]: /images/20220301/1de9bef46fdb47e49a184bd39ad9eb6d.png
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]: /images/20220301/44e4ef0c78f04b75bb931ef275cc50f8.png
[vue 1]: /images/20220301/ce1176f9190847fc96d1d9e65c8f24fe.png