vue-cli3.0 搭建项目

1、首先我们先在安装好node node用于npm安装【自行百度】

2、全局安装vue

　　通过npm命令安装vue.js

　　在用vue.js在用于构建大型的应用时推荐使用npm安装，npm能很好的和webpack、browserify、commonJS模块打包器配合使用

　　npm i -g vue

3、全局安装vue-cli

　　npm i -g @vue/cli

　　安装完成后输入 vue -V 或者 vue --version 检查vue-cli 的版本

4、创建一个vue项目

　　vue create hello-world　　hello-world为文件名

5、这里我们选择Manually (手动地)

6、随后出现　　【空格是选择，回车确认】

Babel：这个是解析我们es6的代码的，为什么要用它呢？因为对于一些ie浏览器，甚至firFox浏览器低版本的还不能识别我们的es6代码，在写项目中我们还是有很多地方要用到它滴。

　　　　那么我们就可以用babel这个小家伙将我们的es6的代码转译成浏览器能识别的代码

TypeScript：使用typescript的语法

Progressive Web App (PWA) Support：支持渐进式的网页应用程序

Router：Vue Router　　

Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。【文档原话搬过来的】 router 和 vuex 文档有很大的帮助

CSS Pre-processors：选择CSS预处理

Linter / Formatter：规范你，反正就是让你撸着撸着就不爽的东西。

Unit Testing：单元测试　　【具体百度一下吧，嘻嘻】

E2E Testing：端到端的测试　　【同上】

在这个项目中我们就选择这几样，回车然后根据提示走

一个简单的vue项目就搭建好了

原文地址：https://www.cnblogs.com/TreeCTJ/p/10134791.html

时间： 2024-10-08 03:57:27

vue-cli3.0 搭建项目的相关文章

VUE CLI3.X 创建项目

Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多个Node版本 nvm github地址:https://github.com/nvm-sh/nvm Vue CLI 3.0环境搭建卸载老版本vue-cli:npm uninstall vue-cli -g 安装新版本:npm install -g @vue/cli 原型开发:npm instal

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

使用vue-cli3（vue脚手架）搭建项目的步骤

平时经常会用到,记录一下! 准备工作 : 环境要求vue cli要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ ) 有node的情况下就可以使用npm进行安装了 1.打开项目文件夹进入cmd 输入 npm install -g @vue/cli 或者 yarn global add @vue/cli 2.下载好之后输入vue create '你的项目名' 回车创建 3.接着就会进入问答环节(选择一些配置) 3.1

使用vue-cli3（vue脚手架）搭建项目时遇到的问题

vue2.x 脚手架创建项目命令是 vue init webpack '项目名称' vue3.x 脚手架创建项目命令是 vue create '项目名称' (要求: 环境要求vue cli要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )) 1. vue create '项目名称' (选择一些配置) 1.1 问题来了: 我不想选择默认(default), 我想选择手动的,然而(上下箭头切换 , 空格是选中)不

vue3.0搭建项目+map地图

1. 进入目录,搭建cli脚手架:npm install -g @vue/cli 2. 启动GUI界面:vue ui 3. 根据所选新建项目 4. 安装地图组件:npm install vue-amap --save 5. main.js入口文件: import Vue from 'vue'import VueAMap from 'vue-amap';import App from './App.vue' Vue.config.productionTip = false; Vue.use(Vue

Vue CLI3 开启gzip压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.g

vue-cli脚手架——3.0版本项目案例

一.[准备工作] node与git部分见vue-cli2.0搭建案例 vue-cli3.0是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供如:serve.build 和 inspect 命令

从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之七 || API项目整体搭建 6.2 轻量级ORM

代码已上传Github,文末有地址书接上文:<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之六 || API项目整体搭建 6.1 仓储>,我们简单的对整体项目进行搭建,用到了项目中常见的仓储模式+面向接口编程,核心的一共是六层,当然你也可以根据自己的需求进行扩展,比如我在其他的项目中会用到Common层,当然我们这个项目接下来也会有,或者我还会添加Task层,主要是作为定时项目使用,我之前用的是Task Schedule,基本能满足

Vue全家桶+Egg从0开发大型项目（一）搭建项目

前言因为要开发本科毕设,做一个校友交流平台,正好想记录下整个开发过程,同时也分享给各位.当然那些需求调研的,前期设计的就省略啦. 项目大概是一个全栈的项目,使用的IDE是vscode(期间涉及一些插件.配置推荐),大概的项目技术栈: vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize 前端就用vue-cli3来搭建,后端就用egg-init来搭建,比较简单,官方文档也比较详细. 项目技术栈前端: 前端MVVM框架