使用vue-cli来搭建vue项目
前提:搭建好NodeJS环境
1. 什么是vue-cli?
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:
vue init webpack xxx
如果出现以下问题:代表网络不行,换网即可
注1:xxx 为自己创建项目的名称
注2:必须先安装vue,vue-cli,webp
2. 安装vue-cli
npm install -g vue-cli
安装成功后,会出现如下文件
安装完成之后打开命令窗口并输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。
注2:“一问一答”模式
1.Project name:项目名,默认是输入时的那个名称spa1,直接回车
2.Project description:项目描述,直接回车
3.Author:作者,随便填或直接回车
4.Vue build:选择题,一般选第一个
4.1Runtime + Compiler: recommended for most users//运行加编译,官方推荐,就选它了
4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files
- render functions are required elsewhere//仅运行时,已经有推荐了就选择第一个了
5.Install vue-router:是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件
6.Use ESLint to lint your code:是否用ESLint来限制你的代码错误和风格。N 新手就不用了,但实际项目中一般都会使用,这样多人开发也能达到一致的语法
7.Set up unit tests:是否安装单元测试 N
8.Setup e2e tests with Nightwatch?:是否安装e2e测试 N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself //选择题:选第一项“Yes, use NPM”是否使用npm install安装依赖
全部选择好回车就进行了生成项目,出现如下内容表示项目创建完成
# Project initialization finished!
# ========================
实在不会选,就回车选择“默认”或是选择“N”不安装
如图
我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块
npm install #安装所有项目需要的npm模块
如:添加element-ui模块
npm install element-ui -S #-S就是-save的缩写
npm run dev 启动并访问项目
这样,一个最简单的vue项目就搭建好了
目录解释:
build文件夹 这个文件夹主要是进行webpack的一些配置
webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.js webpack开发环境配置
webpack.prod.conf.js webpack生产环境配置
build.js 生产环境构建脚本
vue-loader.conf.js 此文件是处理.vue文件的配置文件
config文件夹
dev.env.js 配置开发环境
prod.env.js 配置生产环境
index.js 这个文件进行配置代理服务器,例如:端口号的修改
node_modules文件夹 存放npm install时根据package.json配置生成的npm安装包的文件夹
src文件夹 源码目录(开发中用得最多的文件夹)
assets 共用的样式、图片
components 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
router 设置路由
App.vue vue文件入口界面
main.js 对应App.vue创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置
static文件夹 存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置
对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
package.json 这个文件有两部分是有用的:scripts 里面设置命令以及在dependencies和devDependencies中,
分别对应全局下载和局部下载的依赖包
使用vue-cli来搭建vue项目相关推荐
- 猿创征文|【Vue五分钟】 Vue Cli脚手架创建一个项目
目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...
- vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)/ 前端知识
文章目录 简介 安装 安装nodejs nvm npm换源 单次换源 永久换源 方法一 方法二 Vue/cli安装 创建Vue/cli项目 解决常见错误 用命令行创建项目 可视化界面创建 项目目录简介 ...
- Vue 入门之搭建vue脚手架
系列文章目录 第一章 Vue 入门之搭建vue脚手架 第二章 Vue入门之项目结构介绍 第三章 Vue入门之基本语法 第四章 Vue入门之企业站点开发实践 第五章 Vue入门之前端部署 文章目录 系列 ...
- python怎么新建工程_Python vue坏境搭建及项目创建
vue项目坏境搭建 node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm)~~pip:npm是一个终端应用商城,可以换国内源cnpm vue~~ django:vu ...
- vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目 我通过提示选择了所需的插 ...
- vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...
- Vue Cli 3 搭建一个可按需引入组件的组件库架子
Ant-design.Element 这些框架都有按需引入组件的功能.需要使用哪个组件,就引入哪个组件,这样那些没必要的组件就不会打包到我们的项目里了.跟着我下边的步骤,相信大家也能搭建出一个按需引入 ...
- Vue CLI 3搭建
卸载旧版本 vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本. 卸载指令:npm uninsta ...
- Vue.js 学习笔记十二:Vue CLI 之创建一个项目
目录 创建一个项目 创建一个项目 运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
- Vue入门 - 环境搭建Vue项目创建
Vue起步:从零开始搭建一个完整的Vue项目 一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置 二.搭建vue项目环境 一.安装Node环境 1.下载Node.js安装包并 ...
最新文章
- PCL采样一致性算法
- mysql case break_按月转移日志表中日志时,mysql总是报‘MySQL server has gone away’这样的错!...
- 升级到VS.net 2008 sp1并安装卡巴斯基的兄弟们小心了
- PHP的serialize与json_encode
- linux下clone一直运行,Linux中vgimportclone命令起什么作用呢?
- 如何交到一个女朋友?
- 电脑键盘按钮功能注释大全
- TCP/IP 免费ARP
- JAVA编程规则【转自java编程思想】
- 大数据_Flink_Java版_数据处理_时间语义(1)_时间语义概念---Flink工作笔记0049
- java 面向对象 重载_Java方法重载
- ArrayAdapter requires the resource ID to be a TextView错误
- 我的世界服务器启动端怎么制作教程,我的世界怎样制作和运行服务器 详细制作教程一览...
- Android Studio4.0解决Gradle下载超时问题
- 津巴布韦 apn_津巴布韦的回忆-你负担不起回家
- 为什么提问能力很重要?
- 用php实现基本功能,php实现文件管理与基础功能操作的方法
- pannel加载form
- mysql主键有Duplicate entry
- 海康摄像头尾部网线端口线序