Vue环境的搭建以及Vue项目的创建与启动

1、安装node.js环境    下载 | Node.js

安装完成后,打开命令行窗口(cmd)

输入node -v 和npm -v,查看node.js和npm的版本号


C:\Users\86132>node -v
v16.14.2

C:\Users\86132>npm -v
8.5.0

2、全局安装vue-cli

C:\Users\86132>npm install --global vue-cli

3、安装webpack

C:\Users\86132>npm install --global webpack

4、创建项目demo

4.1、进入你的vue项目的工作空间下

C:\Users\86132>d:

D:\>cd D:\project

4.2、创建vue项目

D:\project>vue init webpack demo

4.3、安装vue项目需要的依赖包

D:\project\demo>npm install

4.5、启动项目

D:\project\demo>npm run dev
> demo@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:9788) [DEP0111] DeprecationWarning: Acces
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue环境搭建项目配置主要包括以下几个步骤: 1. 安装Node.js和npm:Vue是基于Node.js开发的,所以需要先安装Node.js和npm。可以从官网下载Node.js安装包,安装完成后打开终端输入`node -v`和`npm -v`命令查看版本号,以确认安装成功。 2. 安装Vue CLI:Vue CLI是Vue的脚手架工具,可以快速搭建Vue项目。可以使用npm或者yarn安装,命令如下: ``` npm install -g @vue/cli ``` 3. 创建Vue项目:使用Vue CLI创建Vue项目非常简单,只需要在终端中输入以下命令即可: ``` vue create your-project-name ``` 在创建过程中会提示选择一些选项,例如是否使用ESLint、是否使用Vue Router等。根据需要进行选择即可。 4. 项目配置:在Vue项目的根目录下,有一个`vue.config.js`文件,可以在这个文件中进行一些项目配置,例如设置代理、设置打包路径等。配置完成后需要重新启动项目才能生效。 5. 安装Vue插件:Vue插件可以扩展Vue的功能,例如Vue Router用于路由管理、Vuex用于状态管理等。可以使用npm或者yarn安装各种Vue插件。 6. 启动开发服务器:使用以下命令启动开发服务器: ``` npm run serve ``` 启动成功后可以通过浏览器访问`http://localhost:8080`来查看项目运行效果。 7. 打包部署:使用以下命令将Vue项目打包为静态文件: ``` npm run build ``` 打包完成后会在`dist`目录下生成打包好的文件,可以将这些文件部署到服务器上。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值