安装vue cli_vuecli4.x安装与搭建

1.概述

vue-cli是一个官方发布vue.js项目脚手架，是一个基于Vue.js进行快速开发的完整系统

可升级
基于webpack构建，并带有合理的默认配置
可以通过项目内的配置文件进行配置
可以通过插件进行扩展

2.安装

安装Node(需要node版本>=8.9)

下载LTS版本
安装vue-cli

npm install @vue-cli -g安装完成之后输入vue –V，如果出现相应的版本号，则说明安装成功

在硬盘上找一个文件夹放工程用的，cd目录路径

3.搭建项目

两种方式

vue create# 图形界面vue ui

创建项目过程

①

②

③

④

⑤

⑥

4.项目目录结构

vue-cli官网：https://cli.vuejs.org/zh/

node_modules：项目初始下载的所有的包，后续如果再通过npm安装的包也会放入这里面

public：入口页面

src：源文件

assets：静态资源

components：公共组件(轮播图组件、导航栏组件、购物车组件等等)

router：路由配置，导入页面的组件

store：用来写vuex

views：页面级组件，不是公共组件

App.vue：页面的主组件，其它组件会被嵌套在主组件里

main.js：项目开始的地方

.gitignore：git提交项目，忽略的一些文件，如果clone项目后，需要自行下载一些依赖的环境

babel.config.js：可以将ES6转化为ES5代码

package.json：项目的配置文件，类似于maven中的pom.xml(包含配置了启动项目的信息，npm run serve)

"scripts": {    // 启动项目    "serve": "vue-cli-service serve",    // 项目发布，生成dist文件    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"}

package-lock.json：与package.json类似，也是项目的配置文件

安装vue cli_vuecli4.x安装与搭建相关推荐

webstorm中没有vue插件_webstorm安装vue插件及安装过程出现的问题
想要编辑器识别vue文件需要安装vue插件 1. 安装方法: File--> setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现1个关于 ...
安装vue环境，并新建Vue项目
一.安装vue环境,并新建Vue项目首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后, 我们就已经具备了node和npm的 ...
yarn 安装vue
https://www.jianshu.com/p/02b12c600c7b 安装vue 1.安装 Yarn - 代替 npm 命令(官网下载) 下载链接:https://yarnpkg.com/en ...
安装Vue node 及创建一个Vue 项目
安装Vue 和 node 及创建一个Vue 项目一下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
使用npm安装vue脚手架
通过npm安装vue脚手架准备工作安装node.js node.js中集成npm 下载地址:node下载连接下载好后可以通过cmd命令查看是否安装成功安装cnpm(可选) 由于有些npm资源被 ...
Mac OS下安装Vue完整步骤
文章目录一.安装brew 二.安装node js 2.1 自动安装 2.2 手动安装三.安装vue 四.vue开发工具一.安装brew 首先安装brew,已经安装的则跳至下一步 /usr/bin ...
sonar 扫描vue目录_vue-cli3 项目从搭建优化到docker部署
项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art 1. 创建一个vue项目相信大部分人 ...
Html第1集：WebStorm 安装、vue3.0 安装、npm安装
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126379205 本文出自[赵彦军的博客] 文章目录 WebStorm vue3.0 ...
搭建前端vue环境，安装vue-cli遇到Please try running this command again as root/Administrator的解决方案...
最近在搭前端环境,装完node.js之后,准备安装vue工程的初始化工具时(npm install -g vue-cli),遇到这个坑: 大体的意思就是权限问题,导致/usr/local/lib/no ...