快速上手-创建一个基于webpack模板的vue项目(vs code)

在vs code终端里创建一个基于webpack模板的vue项目

写在前面: 在项目创建之前,请自己动手在桌面创建一个文件夹并命名,这边我创建了一个show的文件夹,之后我们用vs code打开该文件夹。并在终端里面进行下面的操作。

1、npm -v检测是否安装npm环境

PS C:\Users\wzhlo\Desktop\show> npm -v
6.13.4

2、node -v检测是否安装node环境

PS C:\Users\wzhlo\Desktop\show> node -v
v12.16.1

3、全局安装vue-cli:

cnpm install –global vue-cli

PS C:\Users\wzhlo\Desktop\show> cnpm install --global vue-cli     
Downloading vue-cli to C:\Users\wzhlo\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\wzhlo\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\wzhlo\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\wzhlo\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
、、、、、、、、

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

vue init webpack my-project

PS C:\Users\wzhlo\Desktop\show> vue init webpack show

? Project name show
? Project description project
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "show".

5、安装依赖包::cd my-project

To get started:

Documentation can be found at https://vuejs-templates.github.io/webpack
PS C:\Users\wzhlo\Desktop\show> cd show
### 6、 npm run dev
PS C:\Users\wzhlo\Desktop\show\show> npm run dev
 DONE  Compiled successfully in 5829ms                    15:02:45
 I  Your application is running here: http://localhost:8080

在这里插入图片描述

ok 创建完毕
再来看看创建好的目录,之后你就可以开始写你的项目啦
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 1. 首先安装Node.js和npm。 2. 在命令行中输入以下命令安装vue-cli:npm install -g vue-cli。 3. 创建一个新的vue项目vue init webpack my-project。 4. 进入项目目录:cd my-project。 5. 安装依赖:npm install。 6. 运行项目:npm run dev。 7. 打包项目:npm run build。 8. 以上就是基于webpack创建vue项目的步骤。 ### 回答2: Webpack是一个模块打包工具,它可以将多个模块组合成一个文件,并通过一些优化手段来减少文件大小,提高应用的加载速度。Vue项目的创建则需要使用Vue官方提供的脚手架工具Vue CLI,通过Vue CLI创建的项目已经默认集成了Webpack。 步骤: 1. 安装Node.js和npm。Vue CLI依赖Node.js和npm,需要先安装。 2. 全局安装Vue CLI。使用以下命令即可:npm install -g vue-cli 3. 创建Vue项目。使用以下命令创建一个Vue项目vue init webpack my-project 4. 依次输入项目名称、作者、描述等信息,等待项目初始化完成。 5. 进入项目目录,安装依赖。使用以下命令安装项目依赖:npm install 6. 运行开发服务器。使用以下命令启动开发服务器:npm run dev 7. 打包项目。使用以下命令将项目打包:npm run build 在以上步骤中,需要注意的是在运行开发服务器之前需要先安装依赖,同时Vue项目中的配置文件需要放在根目录下的config目录中。此外,Vue CLI和Webpack集成了诸多实用工具,例如在开发过程中自动编译,自动刷新等功能,非常适合用于创建Vue项目。 ### 回答3: Webpack是一种现代化的打包工具,Web站点开发者可以使用Webpack将多个JavaScript模块捆绑成一个单独的JavaScript文件。在vue项目创建中,Webpack可以用来管理、编译、打包所有项目依赖的文件,包括CSS、JavaScript文件以及各种资源文件。下面是如何基于Webpack创建Vue项目的具体步骤: 1. 安装Node.js和npm:在开始创建Vue项目之前,需要先安装Node.js和npm,确保电脑中有Node.js和npm的最新版本。 2. 安装Vue CLI:Vue CLI是官方推荐的Vue.js项目脚手架工具,它可以帮助快速搭建Vue项目的基本结构。使用npm安装最新版本的Vue CLI,运行以下命令: ``` npm install -g @vue/cli ``` 3. 创建Vue项目:使用Vue CLI创建Vue项目的命令如下: ``` vue create [project-name] ``` 其中“project-name” 是你想要给新项目起的名称。在创建过程中,可以选择使用默认配置或自定义设置。一般推荐选择“Manually select features”选项,手动选择所需的功能。 4. 启动Vue项目:进入到新创建的Vue项目目录下,可以使用以下命令启动项目: ``` npm run serve ``` 此命令将执行开发模式搭建并开启一个本地服务器,你可以在项目根目录下的“src”目录中找到个性化的Vue.js应用程序。 5. 配置WebpackVue项目依赖的所有文件都需要通过Webpack进行编译和打包处理。你可以在项目根目录下找到名为“webpack.config.js”的配置文件,这个文件控制Webpack的各种行为和处理方式。 在Webpack配置文件中,需要将Vue.js的loader添加到配置文件中以编译.vue文件,同时添加其他需要的loader和plugin。 最后,新建一个build目录,并在其中创建一个webpack.prod.conf.js配置文件,用于控制Webpack的打包构建行为以及生成生产环境需要的文件。 总之,通过以上步骤和方法,我们可以基于Webpack很方便地创建一个Vue项目并进行配置。同时,在增量式开发时,也可以遵循上述方法进行打包以及代码优化等需求的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值