首页 > 其他分享 >vue项目搭建(完整步骤)

vue项目搭建(完整步骤)

时间:2023-01-08 12:00:23浏览次数:33  
标签:Node vue 步骤 配置 选择 安装 回车 搭建

一、安装环境

1.安装Node.js

下载地址:https://nodejs.org/zh-cn/ 建议下载长期维护版 Node.js安装 下载完成后打开,一直下一步最后点击install就好了 这里建议不要安装到C盘 在这里插入图片描述

2.验证Node.js是否安装完成

在终端中输入Node -v 在这里插入图片描述 这里需要注意一下,如果是在vscode的内置终端中输入Node -v 可能会这样 在这里插入图片描述将Vscode全部关闭之后,使用管理员身份打开就好了 在这里插入图片描述

二、安装vue脚手架(vue-cli)

1.安装cnpm

可以通过npm,yarn进行安装,因为我这里安装了Node,Node内置有NPM,所以无需进行安装,如果NPM安装的速度太慢,可以使用淘宝的镜像源(如果NPM安装速度快的话可以直接跳过这一步)

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v:查看安装是否完成

在这里插入图片描述

2.全局安装Vue-CLI

npm install -g @vue/cli  //国外下载
cnpm install -g @vue/cli //镜像源下载(需要安装cnpm)
# OR
yarn global add @vue/cli

检查安装是否完成

vue --version

在这里插入图片描述

三.搭建VUE项目

1.创建文件

vue create(项目名)

在这里插入图片描述 保存的配置:当手动配置完成以后选择是否保存该配置时保存的 自动安装Vue3.x:回车后便会自动安装3.x版本的Vue 自动安装Vue2.x:回车后便会自动安装2.x版本的Vue 手动配置:需要自己手动的去配置自己的喜好 我们这里选择手动配置(↓选择到Manually select features回车选择)

2.选择配置

在这里插入图片描述空格选择,回车下一步!!! Babel:Babel是一个 JavaScript 编译器。(必选TypeScript:TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。 Progressive Web App (PWA) Support:渐进式网页应用 Router:Vue.js 的官方路由(必选VueX:是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 CSS Pre-processors:CSS预处理 Linter / Formatter:代码风格、格式校验(建议有一定基础在选择Unit Testing: 单元测试,对软件中的最小可测试单元进行检查和验证。 E2E Testing:自动化测试框架 具体需要安装哪些内容,根据自己的喜好进行安装,我这边给一个常用的配置 在这里插入图片描述

3.选择搭建的vue版本

在这里插入图片描述 我这里安装的是2.x的版本,回车下一步。

4.路径模式选择

在这里插入图片描述按需选择我这里是输入Y,回车下一步

5.选择CSS预处理器

在这里插入图片描述因为我一直用的是Sass所以选择的是Sass,在选择配置中如果没有选择CSS Pre-processors,则不会出现这个选择,直接跳过不影响

6.选择ESLint配置

在这里插入图片描述建议选择第三个ESLint + Standard config 标准模式

7.代码格式检查时间

在这里插入图片描述选择第一个Lint on save,保存时检查

8.配置文件存放位置

在这里插入图片描述选择In dedicated config files ,单独的配置文件中

9.是否保存该配置

在这里插入图片描述此处按需选择,如果选择Y则需要输入配置的姓名即可

四.运行VUE项目

cd (项目名)

在这里插入图片描述

npm run serve

在这里插入图片描述 Alt+左键点击就可以打开了 在这里插入图片描述 当看到这个界面就代表搭建成功了!

标签:Node,vue,步骤,配置,选择,安装,回车,搭建
From: https://blog.51cto.com/u_15928719/5996638

相关文章

  • DevOps实战系列【第二章】:详解Gitlab环境及搭建
    个人亲自录制全套DevOps系列实战教程:​​手把手教你玩转DevOps全栈技术​​gitlab就不多说了,这个东西现在大多数公司内部都在使用,它分为社区和企业版本,社区版本ce是免费的......
  • vue-cli更改包管理器yarn为npm
    找到路径C:\Users{当前登录的用户名}\下的.vuerc文件打开此文件,修改packageManager的值就可以了如果你想在项目中使用npm包管理工具,就将其值改为"npm"如果你想在项目中......
  • DevOps实战系列【第三章】:详解Maven仓库及环境搭建
    个人亲自录制全套DevOps系列实战教程:​​手把手教你玩转DevOps全栈技术​​Maven私有仓库,就不多说了,我们这里选用最新的Nexus3的3.17版本,平时公司使用的都是Nexus2.x,新的......
  • 13 总结Vue数据监测
    总结Vue数据监测1.Vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视,切要在newVue时,就传入要监测的数据。(1).对象中后追加的属性,Vue默认不做......
  • Vue ESLint Component name should always be multi-word
    意思是建议组件名由多个单词组成,使用About之类的单个单词命名组件可能会报这个提示。Option1:全局关闭//<projectRoot>/.eslintrc.jsmodule.exports={⋮ru......
  • java环境搭建
    Day2-jdk下载(8u201免费)下载地址https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html安装地址    安装完后设置系统变量如下四......
  • 重学ElasticSearch (ES) :ELK搭建SpringBoot日志实时分析系统
    一、概述在一个大型的分布式架构的项目里,不同的服务模块部署在不同的服务器上,如果想要定位问题,可能需要去不同的服务器上查看不同服务的日志。那么,ELK可以很方便的把日志集......
  • vue 使用echarts
    0.在vue内使用echarts可使用v-echart这个魔改版本,完全是可用的,但不在本次叙述范畴1.首先安装 npminstallecharts--save或者yarnaddecharts2.先上结论 ......
  • vue组件的对象式写法,vue中的h函数
    render:将虚拟dom转为真实domh函数:创建的是vnode,也可以成为createVnode函数语法:h(元素名称,这个元素的数据,子集)第一个参数:可以为一个html标签,一个组件,一个异步组......
  • 解决uni-app使用vuex刷新后数据失效 即数据刷新后消失
    我是前端小白萌新一枚最近在用uniapp写一个app遇到不少坑特此记录一下啦~~一开始我存储数据时用vue中的store在登陆的时候把获取到的个人信息存储在store的仓库里面,然......