vue创建一个基于 webpack 模板的新项目

以你之姓@ 2021-09-15 14:10 312阅读 0赞

## 创建一个基于 webpack 模板的新项目 ##

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

#my-project为自定义项目名
    $ vue init webpack my-project

初始化一个项目，或使用

$ vue init webpack-simple my-project

初始化一个简单的项目

![clipboard.png][]

![clipboard.png][clipboard.png 1]

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

![clipboard.png][clipboard.png 2]

**需要注意的是项目的名称不能大写，不然会报错。**

Project name (my-project) \# 项目名称（我的项目）

Project description (A Vue.js project) \# 项目描述一个Vue.js 项目

Author 作者（你的名字）

Install vue-router? (Y/n) \# 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

Use ESLint to lint your code? (Y/n) \# 使用 ESLint 到你的代码？ （Y \[ yes \] / N \[ no \]）

Pick an ESLint preset (Use arrow keys) \# 选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) \# 设置单元测Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) \# 设置端到端测试，Nightwatch？ （Y/ N）

当然这些都看你自己个人的情况，我这里是全选了是。

--------------------

## 安装项目所需要的依赖 ##

刚初始化的项目是没有依赖的，如果运行会报类似这样的错误，

![clipboard.png][clipboard.png 3]

所以在这之前需要解决项目的依赖问题，使用下面的命令安装项目的依赖。

$ cnpm install

如果出现如下图情况，说明依赖解决成功。

![clipboard.png][clipboard.png 4]

--------------------

## 运行项目 ##

$ cnpm run dev

![clipboard.png][clipboard.png 5]

如果看到这个界面，说明配置成功

[clipboard.png]: /images/20210813/482cd997983e42acb4828df6c6d1c2e9.png
[clipboard.png 1]: /images/20210813/3c7915757cd2498e81207519a42860c6.png
[clipboard.png 2]: /images/20210813/679b4fc038484cccaa383bdb58f62e35.png
[clipboard.png 3]: /images/20210813/aad87c2178d548918211afc9152594a4.png
[clipboard.png 4]: /images/20210813/86e741ae5eac4496acfa75f2cc30f454.png
[clipboard.png 5]: /images/20210813/949113710f0849d982da34f69af33d87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关使用VSCode创建一个Vue项目

详细介绍如何创建一个Vue项目，node.js，vue-cli安装，配置淘宝镜像等。

约定不等于承诺〃/ 2024年04月23日 20:06/ 0 赞/ 93 阅读

相关创建基于Webpack的Vue.js项目

创建基于Webpack的Vue.js项目本文目录：一、Webpack简介二、创建基于Webpack的Vue.js项目 1、前提条件（1）、检查node 和

旧城等待，/ 2024年03月25日 20:38/ 0 赞/ 57 阅读

相关 vue 创建新项目

vue 创建新项目 vue init webpack "项目名称" ![在这里插入图片描述][20210419143126691.png] cd .\

以你之姓@/ 2023年01月13日 15:52/ 0 赞/ 223 阅读

相关创建一个vue项目

一、需要用到的东西 node.js环境 (node -v) vue-cli脚手架 (npm install -g @vue/cli ) cnpm

末蓝、/ 2022年12月23日 09:37/ 0 赞/ 236 阅读

相关创建一个vue3的项目

1. 创建一个普通的vue3项目 npm instal -g @vue/cli //全局安装最新vue构建工具 (默认最新) npm create tes

向右看齐/ 2022年12月23日 04:59/ 0 赞/ 243 阅读

相关安装Vue，创建一个Vue项目

安装Vue，创建一个Vue项目 [点这里看完整版][Link 1] [这里还有一个版本][Link 2] [Link 1]: https://blog.csdn.

灰太狼/ 2022年12月09日 02:49/ 0 赞/ 214 阅读

相关快速创建一个vue项目

身为入行未深的小白前端，不断的学习是我们不可丢失的习惯。前端流行的框架也是层出不穷，vue在众多框架中脱颖而出。今天花了两个小时的时间自己走了一边创建vue项目的流程，跟你们分

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 13:05/ 0 赞/ 331 阅读

相关安装Vue 及创建一个Vue 项目

首先要先安装node 及 npm 详情见【http://www.cnblogs.com/ylboke/p/8342116.html 】及【http://www.c

梦里梦外;/ 2022年03月02日 04:54/ 0 赞/ 414 阅读

相关创建一个Vue项目

创建一个Vue项目创建vue所需的一些准备 1. 安装npm（下载了node.js就有） 2. 安装淘宝npm镜像（安装好npm之后控制台输入npm instal

淩亂°似流年/ 2022年02月16日 09:31/ 0 赞/ 353 阅读

相关 vue创建一个基于 webpack 模板的新项目

创建一个基于 webpack 模板的新项目要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用： my-project为自定义项目名

以你之姓@/ 2021年09月15日 14:10/ 0 赞/ 313 阅读