一、创建项目

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

二、启动项目

项目创建之后，会在当前目录下多出一个项目文件夹。从它的 package.json 中可以看到只有 vue.js 的核心依赖

然后启动项目试试，在项目根目录运行终端，在命令行输入

npm run serve

# OR

yarn serve

　　

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

　　

{

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build"

  }

}

　　

在浏览器中打开链接 http://localhost:8080/，就能看到项目的启动页

pycharm中运快捷启动项目：

三、配置文件

项目默认使用的端口是 8080，如果想使用别的端口，可以在项目的根目录创建一个 vue.config.js

// vue.config.js

module.exports = {

  outputDir: 'dist', // 打包的目录

  lintOnSave: true, // 在保存时校验格式

  productionSourceMap: false, // 生产环境是否生成 SourceMap

  devServer: {

    open: true, // 启动服务后是否打开浏览器

    overlay: { // 错误信息展示到页面

      warnings: true,

      errors: true

    },

    host: '0.0.0.0',

    port: 8082, // 服务端口

    https: false,

    hotOnly: false,

    // proxy: { // 设置代理

    //   '/api': {

    //     target: host,

    //     changeOrigin: true,

    //     pathRewrite: {

    //       '/api': '/',

    //     }

    //   },

    // },

   },

}

　　

四、目录结构

1、node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖：

<1> 项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）

<2> 安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4

2、index.html——[主页]

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。这是整个应用的 html 基础模板，也是打包编译后的项目入口。

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

　　

3、src——[项目核心文件]

项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js

4、main.js——[入口文件]

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，后期还可以引入插件，当然首先得安装插件。

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

　　

main.js 只是引入了 App.vue 组件，并挂载到上面提到的 #app 节点下。这里的 createApp方法是 Vue 3 新增的全局 API，用来创建一个 Vue 应用，并挂载到某个 DOM 节点。

5、App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

<template>

  <div id="nav">

    <router-link to="/">Home</router-link> |

    <router-link to="/about">About</router-link>

  </div>

  <router-view/>

</template>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

#nav {

  padding: 30px;

}

#nav a {

  font-weight: bold;

  color: #2c3e50;

}

#nav a.router-link-exact-active {

  color: #42b983;

}

</style>

　　

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）

是子路由视图，后面的路由页面都显示在此处

打一个比喻吧,类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。

【style】

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，

　　

6、router——路由

router文件夹下，有一个index.js，即为路由配置文件

　　

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue'

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home

  },

  {

    path: '/about',

    name: 'About',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

　　

这里定义了路径为'/‘的路由，该路由对应的页面是Home组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件

类似的，我们可以设置多个路由，‘/index’,'/list’之类的，当然首先得引入该组件，再为该组件设置路由。

Vue cli构建项目的更多相关文章

  1. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. vue框架构建项目流程

    构建项目流程: 1.全局查询:node -v 2.全局初始化:npm install --global vue-cli 3.模块化工程:vue init webpack myapp--->y,n ...

  4. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  7. 基于electron+vue+element构建项目模板之【创建项目篇】

    1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...

  8. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  10. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

随机推荐

  1. OpenStack全网最全部署教程

    简单介绍 简单点来说就是一个云,一个属于自己的云平台,openstack的原版是亚马逊云,可以说openstack就是Rackspace和NASA的抄袭产物. 官方点说一个云平台管理的项目,它不是一个 ...

  2. docker 应用篇————tomcat例子[七]

    前言 虽然我干的事情和java不多,但是例子是为了熟悉原理,而不是为了例子而例子的,故而整理一下tomcat的例子. 正文 使用官方示例: 然后运行一下. 没有找到然后进行下载了. 可以看到这里就已经 ...

  3. Sarsa模型和Q_learning模型简记

    1. Sarsa模型 1.1 Sarsa类代码: class SarsaAgent(object): def __init__(self,state_n,action_n,learning_rate= ...

  4. Lattice Crosslink开发简介

    选择lattice的Crosslink器件,大多是因为它功耗比较低.价格便宜,开发也比较简单,相对来说更容易上手.大部分用在手机屏,摄像头模组和平板方面. Crosslink的开发工具是Diamond ...

  5. redis如何在保持读写分离+高可用的架构下，还能横向扩容支撑1T+海量数据

    单机redis在海量数据面前的瓶颈. 怎么才能够突破单机瓶颈,让redis支撑海量数据? redis集群架构 redis cluster 支撑N个redis master node,每个master ...

  6. JavaScript中数值小知识

    1. 数值10.0 这种类似的会被去掉数值后的0 之所以这样是因为,整数的存储空间占用比浮点数小,当一个数值不是真浮点数(即10.0这种格式),会被转换为整数10,如果业务中有一些需求需要进行数值位数 ...

  7. SpringBoot Admin2.0 集成 Java 诊断神器 Arthas 实践

    简介: 项目最初使用 Arthas 主要有两个目的: 1. 通过 arthas 解决实现测试环境.性能测试环境以及生产环境性能问题分析工具的问题. 2. 通过使用 jad.mc.redefine 功能 ...

  8. Fluid 给数据弹性一双隐形的翅膀 -- 自定义弹性伸缩

    简介: 弹性伸缩作为 Kubernetes 的核心能力之一,但它一直是围绕这无状态的应用负载展开.而 Fluid 提供了分布式缓存的弹性伸缩能力,可以灵活扩充和收缩数据缓存. 它基于 Runtime ...

  9. 【产品动态】一文详细解读智能数据构建产品Dataphin的“规划”功能

    ​简介: 数据中台是传统的数据仓库的一种升级, 是数据采集.建设.管理与使用的一整套体系,Dataphin是一个构建数据中台的强大工具, 核心优势是在数据的建设与管理上引入了阿里巴巴多年来数据中台建设 ...

  10. EDA 事件驱动架构与 EventBridge 二三事

    ​简介: 事件驱动型架构 (EDA) 方兴未艾,作为一种 Serverless 化的应用概念对云原生架构具有着深远影响.当我们讨论到一个具体架构时,首当其冲的是它的发展是否具有技术先进性.这里从我们熟 ...