vue 如何新建一个项目

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

1:打开cmd命令行,首先安装node

步骤:https://nodejs.org/en/download/      node官网,选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,输入node -v,如果出现版本信息即表示安装成功。

2:npm包管理器是集成在node中的,所以直接输入npm -v就能查看到版本信息

3:输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,安装淘宝镜像安装相关依赖

4:安装vue-cli脚手架构建工具,输入命令 npm install -g vue-cli,安装完成即可。

5:选定路径,新建vue项目,这里我是新建到桌面上


6:在上一步得目录下新建项目,指令vue init  webpack +项目名称


7:上一步之后就会开始新建项目,询问项目的相关配置。一路yes省事儿没啥问题

8:进入到项目的文件夹下


9:运行项目,指令npm run dev


10:在浏览器中打开这个网址,就能看到

至此,vue项目新建完毕

创建一个Vue.js项目的App文件夹,通常需要进行以下几个步骤来定制和配置一个新的项目: 1. **安装依赖**: 使用Node.js的包管理器`npm`或`yarn`来初始化一个新的项目。打开终端,进入你想创建项目的目录,然后运行: ```bash npm init -y 或 yarn create vue my-app-name ``` 2. **选择模板**: 如果使用`vue create`命令,你可以选择预设的模板(如默认的Vue CLI项目),也可以自定义设置。例如,如果你想要使用Vue 3.x,可以选择`@vue/cli 4.x`或更高版本。 3. **选择骨架结构**: Vue CLI会询问你是否使用默认的骨架结构(推荐)。默认情况下,它会生成一个包含`src`目录的结构,里面包含`App.vue`、`main.js`、`router.js`等核心组件。 4. **修改`App.vue`**: `App.vue`是你的应用程序的主要入口,你会在这里定义项目的布局和初始状态。默认的`<template>`部分已经包含了欢迎消息,你可以根据需要添加或替换内容。 5. **配置路由**: 根据项目需求,你需要在`src/router/index.js`中配置路由规则。如果要做单页应用,可以添加多个`{ path: '/', component: YourComponent }`这样的条目。 6. **添加其他功能**: 可能需要安装额外的插件(如Vuex用于状态管理,axios用于HTTP请求等),并在适当的位置引入并配置它们。 7. **启动开发服务器**: 在项目根目录下运行`npm run serve`或`yarn serve`,启动本地开发服务器,你可以通过浏览器查看和测试你的应用程序。 8. **构建生产环境**: 当项目准备发布时,记得通过`npm run build`或`yarn build`命令生成生产环境的静态资源。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值