搭建vue项目环境

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言

在开发本项目之前，我对vue，react，angular等框架了解，仅限于知道它们是什么框架，他们的核心是什么，但是并没有实际使用过（angular 1.0版本用过，因为太难用，所以对这类框架都有点阴影...）。

这是我第一次使用vue开发项目，在项目开始前1周，我才开始看vue的官方文档。我在安装vue.js并搭建vue项目的过程中遇到了各种各样的问题，并通过百度mother找到了许多不同的解决方法。

当时看了众多的博文，感觉写的并不详细，有些还有点乱，所以想写一个比较完善的博文，既作为项目经验的总结，也希望能帮助刚入vue的小伙伴。

安装node环境

关于如何安装node环境，请查看 windows系统下安装 node.js (node.js安装及环境配置)

安装webpack

  1. 打开命令行工具
    npm install webpack -g（-g表示全局安装）

  2. 检查是否安装成功：
    webpack -h/v

    安装成功会出现版本信息，如下图所示

安装vue-cli 脚手架构建工具

  1. 打开命令行工具
    npm install vue-cli -g（-g表示全局安装）

  2. 检查是否安装成功：
    vue -V

    安装成功会出现版本信息，如下图所示

构建项目

  1. 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here

  2. 安装vue脚手架输入：
    vue init webpack myProject

    注意这里的“myProject” 是项目的名称（可以随便起名字，但是不能是中文）。

vue init webpack myProject    ---------------- 这个是那个安装vue脚手架的命令
? Project name (myProject)    ---------------- 项目名称
? Project description (A Vue.js project)     ----------------项目描述
? Author  authorName       ---------------- 项目创建者
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  y    ----------------  是否安装Vue路由，也就是以后是spa（单页面应用需要的模块，要用输入y，不用输入n，可以在用的时候再安装）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   ---------------- 是否启用eslint检测规则（eslint是一个代码语法规范检查的工具，选择no就不会把语法规范功能加进webpack编译的流程里。建议选no）
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)    ---------------- 是否启用单元测试（可加可不加）
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y       ----------------  是否启用单元测试
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "myProject".
To get started:     ---------------- 这里说明如何启动这个服务
    cd exprice        ---------------- 进入项目文件夹
    npm install      ---------------- 下载依赖
    npm run dev   ----------------  启动项目

  1. 进入项目文件夹
    cd myProject

  2. 安装项目依赖：
    npm install

  • 因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

  • 如果安装依赖时间太长或者安装依赖总是失败的话，建议使用淘宝镜像安装。

  • 安装淘宝镜像
    npm install -g cnpm --registry="https://registry.npm.taobao.org"

  • 安装好淘宝镜像后就可以使用cnpm代替npm（据说淘宝镜像会缺失一些依赖库，可以先用淘宝下载依赖，如果下载完有缺失库的话，再用npm下载缺失的库就行了）

  • 以下是安装完依赖后的截图：

  • 安装项目需要的依赖

npm install --save-dev normalize.css
npm install --save-dev element-ui -S    安装element-UI，实际这样安装的element-ui并不是最新版本，有很多属性无法使用
npm install --save-dev 依赖包@版本号    安装指定版本的依赖包

  1. 启动项目(这是第5步，不知道为啥变成了1...)
    npm run dev

  2. 打包项目(这是第6步.)
    npm run build

项目目录文件说明

├── index.html                                 入口页面
    ├── build                                      构建脚本目录
    │   ├── build-server.js                  运行本地构建服务器，可以访问构建后的页面
    │   ├── build.js                             生产环境构建脚本
    │   ├── dev-client.js                     开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                             构建相关工具方法
    │   ├── webpack.base.conf.js            wabpack基础配置
    │   ├── webpack.dev.conf.js               wabpack开发环境配置
    │   └── webpack.prod.conf.js             wabpack生产环境配置
    ├── config                                          项目配置
    │   ├── dev.env.js                               开发环境变量
    │   ├── index.js                                  项目配置文件
    │   ├── prod.env.js                             生产环境变量
    │   └── test.env.js                              测试环境变量(启用单元测试才有该文件)
    ├── package.json                              npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
    ├── src                                              项目源码目录    
    │   ├── main.js                                  入口js文件
    │   ├── app.vue                                根组件
    │   ├── components                          公共组件目录
    │   │   └── helloWorld.vue
    │   ├── assets                               资源目录，这里的资源会被wabpack构建
    │   │   └── logo.png
    │   ├── routes                                前端路由
    │   │   └── index.js
    │   ├── store                                  应用级数据（state）
    │   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                              纯静态资源，不会被wabpack构建。
    └── test                                测试文件目录（unit&e2e,启用单元测试才有该文件）
        └── unit                            单元测试
            ├── index.js                    入口脚本
            ├── karma.conf.js               karma配置文件
            └── specs                       单测case目录
                └── Hello.spec.js

安装过程中遇到的问题及解决办法

  1. 在遇到错误的时候，先检查一下npm，vue-cli的版本，有时候会因为不是最新版本而报错

npm update -g               更新npm
npm update vue-cli        更新vue-cli
npm view vue-cli            查看全局的vue-cli的信息

  1. 遇到一下问题，表示你没有安装该模块，安装上就可以了

Module build failed: Error: Cannot find module '模块名'

总结

以上就是一个搭建vue项目的完整流程了。由于时隔太久，在安装时遇到的其他问题，有些想不起来了。如果看文的诸位遇到了问题，不要大意的留言吧（要把问题表述清楚哦~），我看到了就会回答的。

如果在文中我有写错的地方，请不吝指教，谢谢~

以上是 搭建vue项目环境 的全部内容， 来源链接： utcz.com/z/379993.html

回到顶部