使用vue-cli创建vue项目及项目结构说明

node及vue的安装就不讲了，网上一大堆，自行查阅

1 创建项目目录

mkdir vueDemo

2 切换到该目录

cd vueDemo

3 执行命令创建项目(项目名称：vue-init-webpack）

vue init webpack vue-init-webpack

Project name:——项目名称，直接回车即可

Project description:——项目描述，直接回车即可

Author:——作者，直接回车即可

Vue build:——构建模式，直接回车即可

Install vue-router?:——是否安装引入vue-router，选Y，vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度

Setup unit tests 是测试，可以不用安装，选n

Setup e2e tests with Nightwatch 是测试，可以不用安装，选n

最后一项是选择用什么install依赖组件，因为npm比较慢，我一般选第三项，创建完项目后，使用cnpm安装（cnpm自行在网上查阅安装）

创建项目完成后，会有后继命令的提示，接下来继续操作

4 切换到已创建的项目目录中

cd vue-init-webpack

5 执行安装依赖组件命令（我这里用的是cnpm）

cnpm install

安装完成

6 启动服务(开发环境)

cnpm rum dev

服务启动成功

7 在浏览器查看：http://localhost:8080

至此，创建基本vue项目成功，接下来说明该项目各目录及文件的用途

原文地址：https://www.cnblogs.com/liyunfei0103/p/10183620.html

时间： 2024-11-07 18:06:21

使用vue-cli创建vue项目及项目结构说明的相关文章

[Vue CLI 3] vue inspect 的源码设计实现

首先,请记住: 它在新版本的脚手架项目里面非常重要它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 vue 的一个扩展命令,在文件 @vue/cli/bin/vue.js 中定义了 command 还是依赖了工具包 commander const program = require('commander') 代码配置如下: program .command('inspect [paths...]

使用Vue CLI构建Vue项目

第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://registry.npm.taobao.org,安装淘宝镜像,以后安装其他依赖时候就可以输入cnpm install --- 了,因为npm安装会非常慢,一般来说会失败: 第三步:控制台输入vue init webpack my-project 注:这里的my-project就是你要创建的项目的名称,自

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

Vue CLI 3.x搭建Vue项目

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c

【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接一.准备工作安装vue npm install vue 安装脚手架vue-cli npm install -g @vue/cli 创建webpack项目 vue init webpack my-app 运行 cd my-app npm run dev 按照提示,在浏览器打开http://localhost:8082/,效果如下: 安装状态管理vuex npm install vuex --save-dev 目

vue/cli 3.0 脚手架【进阶】

安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目基于vue-cli配置移动端自适应转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 lib-flexible

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

vscode下搭建vue.js开发环境（基于最新的@Vue/cli 4.2.2）

2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2.下载并安装node.js(一直next即可) 安装完成之后在终端输入:node -v和npm -v查看是否安装成功.npm是node.js的包管理工具. 3.这里我们可以更改node.js默认下载依赖的位置在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_g

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作在项目根目录的public目录下

vue cli3 和 vue cli4

最近安装了vue cli4, 和vue cli3做下对比.我自己手动选择的配置, 安装了Router,Vuex 我安装的版本是@vue/cli 4.2.3 一.项目结构左边为vue cli3, 右边为vue cli4 默认目录结构已更改 src/store.js 改为 src/store/index.js src/router.js 改为 src/router/index.js 二.babel.config.js文件主要是 babel 的预设由@vue/app 改成了@vue/cli-plu