2.4 使用vue-cli创建项目/项目打包/发布

一、概述

eslint:

用来做项目编码规范检查的工具;
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息;
有相应的配置, 可定制检查;

命令:

npm install -g vue-cli :全局安装vue脚手架,安装完成到处可用

vue init webpack vue_demo:创建vue项目,webpack代表选择的模板,总共有6中模板可用选择【模板】,vue_demo是项目名

npm run dev:表示开发环境的打包运行(在内存中打包并将项目运行起来),这里的dev看的是项目下的package.json文件(第8行),

        也可以采用npm start命令, 效果是一样的,也可以npm run build。运行起来后,默认没有帮你启动,我们可以通过

        改动配置,让他自动帮我们启动(自动跳转chrome浏览器);

npm run build:将项目编译打包,打包完成后的文件夹叫dist

发布:

方式一 :使用静态服务器工具包

npm install -g serve:全局安装静态服务器serve

serve dist:运行打包后的项目,运行后就可以访问了http://localhost:5000/

方式二:使用动态web服务器(tomcat)

修改配置: webpack.prod.conf.js(28行以后加上一行):
output: {
  publicPath: ‘/xxx/‘   //打包文件夹的名称(加上这一行)
}
重新打包(这是因为这里修改了配置):
npm run build 
修改打包生成的dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx

二、步骤

1. 创建项目

vue脚手架(vue-cli)是用来创建vue项目的工具包;

//创建项目:
npm install -g vue-cli //这个是安装vue-cli的命令(已经安装过了就不用再安装了) -g:表示全局安装  可以通过命令 vue来查看是否已经安装过脚手架
vue init webpack vue_demo // webpack:表示模板名称  vue_demo: 表示项目的名称

开发环境运行:
cd vue_demo //注意看控制台的命令提示
npm install //这个命令是在选择了i will handle that myself(自己手动下载)以后才用得到的
npm run dev // 将当前项目在内存中打包并运行 生产环境打包发布 npm run build npm install -g serve serve dist http://localhost:5000

注意: 项目名vue_demo不能包含大写字母,

下面提供了三种下载方式:npm下载、yarn下载,自己手动下载

(如果选择了手动下载,则它们会马上结束,并提示你该怎么去下载,

  eg:

     cd vue_demo

    npm install:下载

2. 项目结构说明

build:webpack相关的配置文件夹(基本不会修改)

  -dev-server.js:通过express启动后台服务

config:webpack相关的配置文件夹(基本不会修改)

  -index.js:指定的后台服务的端口号和静态资源文件夹

mode_modules

src:源码文件夹

  -components:vue组件及其相关资源文件夹

  -App.vue:应用根主组件,一个应用一般都会有一个根组件

  -main.js:应用入口js  

static: 全局资源

  -.gitkeep:这个是给git服务的,git有一个特点,如果一个文件夹里面什么都没有,那么这个文件夹会被忽略,

           但是又不希望这个文件夹被忽略,这次它就提供了一个语法,就是在这个文件夹里面创建一个叫

       .gitkeep的文件,这个文件里面什么都不用写,那么git就会把这个文件和文件夹都版本控制起来.

.baberlrc:该文件有两个功能: 1) ES6转ES5;2) jss转js   

.eslintignore:eslint检查忽略的配置,哪些文件会被忽略,不被检查(配置哪些文件、文件夹忽略检查,eg: /*.js

       表示根目录下的所有js忽略检查,*.js表示所有的js文件都忽略检查)

.eslintrc.js:eslint 检查的配置 (在这个文件里可以忽略eslint的某些规则,让其失效,eg: rules里面滴28行加上: ‘indent‘:‘off‘)

.gitignore:git版本管理的忽略配置

index.html:主页面文件

package.json:这是当前应用的描述文件

README.md: 应用描述说明的 readme 文件

main.js:入口文件,如下

/*
入口JS
 */
import Vue from ‘vue‘
import App from ‘./App.vue‘ //引入组件

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘, //为啥写app呢?主要看index.html中有个id="app"
  components: {App}, // 通过这个配置,将组件映射成指定名称的一个标签(即这里的标签名叫App), 这里{App}可以写成{App:App}
  template: ‘<App/>‘, // 指定需要渲染到页面的模板,这个模板会插入到 ‘#app‘中(el所匹配的页面上的div中)
})

index.html:主页

所有的js都会被打包生成一个叫app.js的文件

<body>
    <div id="app"></div>
    <!-- built files will be auto injected --></body>

原文地址:https://www.cnblogs.com/shiyun32/p/9693792.html

时间: 2024-10-02 05:47:43

2.4 使用vue-cli创建项目/项目打包/发布的相关文章

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

VUE 安装&amp;创建一个项目

1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.cn/download/ 2,npm(cnpm) npm是node的包管理工具 使用node之后你会接触各种各样成千上万的Package(包),就需要一个管理工具能很好的解决它的安装,更新,依赖包安装等等的维护.默认安装完node之后,npm会自动安装上的.还是cmd,输入命令 npm -V .正常出

Maven项目的打包发布到Nexus私服和服务器

1.编写pom文件如下: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-release-plugin</artifactId> <version>2.4.1</version> </plugin> <plugin> <groupId>

Spring boot项目的打包发布

Eclipse打包发布项目 打包项目 首先需要将项目编译的文件删除,执行[Run As]->[Maven clean] 如果这个时候项目报错,在pom.xml文件中添加以下代码过滤掉单元测试 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <version>2.20.1</

【2019-10-10】使用CLI创建新项目

一个Angular工程有一个工作空间,但一个工作空间可以存在单个或者多个项目 Angular中的项目指的就是Application或者Library Case1:Angular工作空间只有一个项目(Application) step1: ng new my-app //此命令会创建angular workspace名为my-app ,且会自动以my-app创建一个初始应用 Case2:Angular工作空间有多个项目(Application+Library) step1: ng new my-w

extjs6 创建工程和打包发布

准备工作: 下载extjs6的开发包,我这里是试验版:ext-6.6.0-trial.zip.解压到某个目录,我这里解压到:D:\tools\about-ext\ext-6.6.0-trial 目录下 下载并安装extjs6的命令工具:SenchaCmd-6.6.0.13-windows-64bit.zip,配置环境变量,或者将安装好的目录(C:\Users\xiongxiaomeng\bin\Sencha\Cmd)添加到path变量中 创建extjs的工作空间:打开cmd命令,输入:sench

【前端vue开发架构】vue开发单页项目架构总结

为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (https://www.npmjs.com) webpack (https://github.com/webpack/webpack) vuejs (https://vuejs.org) babel (https://babeljs.io) 其他的比如sass等CSS预编译器,都可以先不考虑. 下面对以上涉

快速创建vuecli项目(入门)

1.安装环境 为了方便,以下操作大多数中命令行中运行,window可以用cmd,powershell,gitbash等. 安装node.js 打开它的官网,或者中文网站,然后直接下载就可以了,然后跟安装普通的应用一样,直接安装就好了. 查看node和npm的版本 直接用命令行分别运行下边命令,出现如图,就说明安装完成 node -v npm -v npm的服务器在国外,为了方便,建设安装cnpm npm install -g cnpm --registry=https://registry.np

python 记录Django与Vue前后端分离项目搭建

python 记录Django与Vue前后端分离项目搭建 参考链接: https://blog.csdn.net/liuyukuan/article/details/70477095 1. 安装python与vue 2. 创建Django项目 django-admin startproject ulb_manager 3. 进入项目并创建名为backeng的app cd ulb_manager   python manage.py startapp backend 4. 使用vue-cli创建v