搭建一个Vue项目

ゞ浴缸里的玫瑰 2023-10-02 19:28 4阅读 0赞

#### 目录 ####

*   *   *  一、安装node环境
         *   *   *  1、下载node
                 *  2、检查是否安装成功
                 *  3、为了提高我们的效率，可以使用中国镜像站（原淘宝镜像）
         *  二、搭建vue环境
         *   *   *  1、全局安装vue-cli
                 *  2、进入项目目录，创建一个基于 webpack 模板的新项目
                 *  3、进入项目目录，运行项目
         *  三、vue项目目录详解
         *   *   *  1、build 构建脚本目录
                 *  2、config构建配置目录
                 *  3、src资源目录
                 *  4、其他文件
         *  四、常用快捷键

#### 一、安装node环境 ####

###### 1、下载node ######

[https://nodejs.org/en/  
][https_nodejs.org_en_]

###### 2、检查是否安装成功 ######

node -v
    npm -v

![在这里插入图片描述][87c382ba44ba426496e60ab6abb27fc0.png]

###### 3、为了提高我们的效率，可以使用中国镜像站（原淘宝镜像） ######

https://registry.npmmirror.com

npm install cnpm -g --registry=https://registry.npmmirror.com

查看版本，检查是否安装成功，安装成功后，需要使用npm的就可以用cnpm代替了  
![在这里插入图片描述][754c09573e5549d7b27d056b78f280e0.png]

#### 二、搭建vue环境 ####

###### 1、全局安装vue-cli ######

npm install --global vue-cli

![在这里插入图片描述][3cb32cdf0055414e90ce46833995b32d.png]  
查看是否安装成功，检查vue版本

vue --version
    vue -V
    vue list

![在这里插入图片描述][a533b126b429434d972538825d7289cc.png]

###### 2、进入项目目录，创建一个基于 webpack 模板的新项目 ######

vue init webpack 项目名

![在这里插入图片描述][e8577aef717a4450ba3de4a9a995abf9.png]

<table> 
 <thead> 
  <tr> 
   <th>/</th> 
   <th>说明</th> 
   <th>操作</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vue build</td> 
   <td>打包方式</td> 
   <td>回车</td> 
  </tr> 
  <tr> 
   <td>Install vue-router</td> 
   <td>是否需要安装Vue-router,项目中需要</td> 
   <td>输入Y后回车</td> 
  </tr> 
  <tr> 
   <td>Use ESLint to lint your code</td> 
   <td>是否需要JS语法检查，暂时不需要</td> 
   <td>输入n后回车</td> 
  </tr> 
  <tr> 
   <td>Set up unit tests</td> 
   <td>是否安装单元测试工具，暂时不需要</td> 
   <td>输入n后回车</td> 
  </tr> 
  <tr> 
   <td>Set e2e tests with Nightwatch</td> 
   <td>是否需要端到端测试工具，暂时不需要</td> 
   <td>输入n后回车</td> 
  </tr> 
 </tbody> 
</table>

###### 3、进入项目目录，运行项目 ######

cd vue-test   进入项目目录
    npm install   安装依赖
    npm run dev   运行项目

![在这里插入图片描述][8969a65de85d43ce892520c8c731031d.png]  
访问测试，如下则安装成功  
![在这里插入图片描述][bb417e51f9a24592a6d1850adb6cb3d4.png]

> 利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构

![在这里插入图片描述][453ff38ea3e84960a680aa02b87bb7d7.png]

#### 三、vue项目目录详解 ####

![在这里插入图片描述][7cf41b366def49caac35c4e6fdf59d42.png]

<table> 
 <thead> 
  <tr> 
   <th>文件夹名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>build</td> 
   <td>构建脚本目录</td> 
  </tr> 
  <tr> 
   <td>config</td> 
   <td>构建配置目录</td> 
  </tr> 
  <tr> 
   <td>node_modules</td> 
   <td>依赖的node工具包目录</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>源码目录</td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td>静态文件目录</td> 
  </tr> 
  <tr> 
   <td>test</td> 
   <td>测试文件目录</td> 
  </tr> 
 </tbody> 
</table>

###### 1、build 构建脚本目录 ######

<table> 
 <thead> 
  <tr> 
   <th>文件名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>build.js</td> 
   <td>生产环境构建脚本</td> 
  </tr> 
  <tr> 
   <td>check.version.js</td> 
   <td>检查npm、node.js脚本</td> 
  </tr> 
  <tr> 
   <td>utils.js</td> 
   <td>构建相关工具方法</td> 
  </tr> 
  <tr> 
   <td>vue-loader.conf.js</td> 
   <td>配置了CSS加载器以及编译CSS之后紫铜添加前缀</td> 
  </tr> 
  <tr> 
   <td>webpack.base.conf.js</td> 
   <td>webpack基本配置</td> 
  </tr> 
  <tr> 
   <td>webpack.dev.conf.js</td> 
   <td>webpack开发环境配置</td> 
  </tr> 
  <tr> 
   <td>webpack.prod.conf.js</td> 
   <td>webpack生产环境配置</td> 
  </tr> 
 </tbody> 
</table>

###### 2、config构建配置目录 ######

<table> 
 <thead> 
  <tr> 
   <th>文件名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>dev.env.js</td> 
   <td>开发环境变量</td> 
  </tr> 
  <tr> 
   <td>index.js</td> 
   <td>项目配置文件</td> 
  </tr> 
  <tr> 
   <td>prod.env.js</td> 
   <td>生产环境变量</td> 
  </tr> 
 </tbody> 
</table>

###### 3、src资源目录 ######

<table> 
 <thead> 
  <tr> 
   <th>文件夹名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assets</td> 
   <td>资源目录，放置一些图片或者公共JS、公共CSS。这里的资源会被webpack构建</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>组件目录，我们写的组件就放在这个目录</td> 
  </tr> 
  <tr> 
   <td>router</td> 
   <td>前端路由，我们需要配置的路由路径写在index.js里面</td> 
  </tr> 
 </tbody> 
</table>

###### 4、其他文件 ######

<table> 
 <thead> 
  <tr> 
   <th>文件名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>App.vue</td> 
   <td>页面级vue组件</td> 
  </tr> 
  <tr> 
   <td>main.js</td> 
   <td>入口js文件</td> 
  </tr> 
  <tr> 
   <td>index.html</td> 
   <td>首页入口文件，可以添加一些meta信息等</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td>npm包配置文件，定义了项目的npm脚本，依赖包等信息</td> 
  </tr> 
  <tr> 
   <td>README.md</td> 
   <td>项目的说明文档，Markdown格式</td> 
  </tr> 
  <tr> 
   <td>.xxx</td> 
   <td>这是一些配置文件，包括语法配置，git配置等</td> 
  </tr> 
 </tbody> 
</table>

#### 四、常用快捷键 ####

<table> 
 <thead> 
  <tr> 
   <th>操作</th> 
   <th>指令</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>打开cmd</td> 
   <td>win + r</td> 
  </tr> 
  <tr> 
   <td>终止运行</td> 
   <td>crtl + c</td> 
  </tr> 
  <tr> 
   <td>返回上一级</td> 
   <td>cd …</td> 
  </tr> 
  <tr> 
   <td>切换E盘</td> 
   <td>e:</td> 
  </tr> 
  <tr> 
   <td>访问文件</td> 
   <td>cd + 文件名</td> 
  </tr> 
 </tbody> 
</table>

[https_nodejs.org_en_]: https://nodejs.org/en/
[87c382ba44ba426496e60ab6abb27fc0.png]: https://img-blog.csdnimg.cn/87c382ba44ba426496e60ab6abb27fc0.png
[754c09573e5549d7b27d056b78f280e0.png]: https://img-blog.csdnimg.cn/754c09573e5549d7b27d056b78f280e0.png
[3cb32cdf0055414e90ce46833995b32d.png]: https://img-blog.csdnimg.cn/3cb32cdf0055414e90ce46833995b32d.png
[a533b126b429434d972538825d7289cc.png]: https://img-blog.csdnimg.cn/a533b126b429434d972538825d7289cc.png
[e8577aef717a4450ba3de4a9a995abf9.png]: https://img-blog.csdnimg.cn/e8577aef717a4450ba3de4a9a995abf9.png
[8969a65de85d43ce892520c8c731031d.png]: https://img-blog.csdnimg.cn/8969a65de85d43ce892520c8c731031d.png
[bb417e51f9a24592a6d1850adb6cb3d4.png]: https://img-blog.csdnimg.cn/bb417e51f9a24592a6d1850adb6cb3d4.png
[453ff38ea3e84960a680aa02b87bb7d7.png]: https://img-blog.csdnimg.cn/453ff38ea3e84960a680aa02b87bb7d7.png
[7cf41b366def49caac35c4e6fdf59d42.png]: https://img-blog.csdnimg.cn/7cf41b366def49caac35c4e6fdf59d42.png