一、创建项目

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. cv.calibrateCamera

    相机造成的失真类型 如何找到相机的内在和外在特性 如何基于这些特性来消除图像失真 基础 一些针孔相机会对图像造成严重失真.两种主要的畸变是径向畸变和切向畸变. 径向变形会使直线看起来是弯曲的.点离图像 ...

  2. HTC Vive之Unity3d开发日记——手柄交互编程

    目录:        HTC Vive之Unity3d开发日记 You can fool all the people some of the time,and some of the people ...

  3. linux 性能自我学习 ———— 不可中断进程和僵尸进程 [四]

    前言 简单介绍一下不可中断进程和僵尸进程. 正文 先来看下进程的状态: 那么这一列的状态是什么呢? R 是Running 或 Runnable 的缩写, 表示进程在cpu 的就绪队列中,正在运行或者正 ...

  4. mysql 必知必会整理—sql 计算函数[六]

    前言 简单整理一下sql的计算函数. 正文 函数没有SQL的可移植性强 能运行在多个系统上的代码称为可移植的(portable).相对来说,多数SQL语句是可移植的,在SQL实现之间有差异时,这些差异 ...

  5. 力扣481(java&python)-神奇字符串（中等）

    题目: 神奇字符串 s 仅由 '1' 和 '2' 组成,并需要遵守下面的规则: 神奇字符串 s 的神奇之处在于,串联字符串中 '1' 和 '2' 的连续出现次数可以生成该字符串.s 的前几个元素是 s ...

  6. 牛客网-SQL专项训练6

    ①要将employee 的表名更改为 employee_info,下面MySQL语句正确的是(A) 解析: RENAME用于表的重命名:RENAME  <NAME>(修改表名或索引名) 或 ...

  7. MaxCompute湖仓一体介绍

    ​简介:本篇内容分享了MaxCompute湖仓一体介绍. 分享人:孟硕 阿里云 MaxCompute产品专家 视频链接:数据智能实战营-北京站 专题回顾 正文: 本篇内容将通过两个部分来介绍MaxCo ...

  8. 从KPI到OKR，高阶产品人如何推动业务高速增长

    简介: 不管是核心大目标,还是O(Objectives),或者北极星指标,奇妙等式等等,最后都需要核心组织协同方式来推动整个目标聚焦以及过程的落地. 作为产品经理人,相信很多人都遇到过以下的灵魂拷问: ...

  9. 与容器服务 ACK 发行版的深度对话第二弹：如何借助 hybridnet 构建混合云统一网络平面

    简介:本次采访我将继续为大家详细讲解我的好伙伴:阿里巴巴的开源 Kubernetes 容器网络解决方案 hybridnet,以及我是如何借助它来构建混合云统一网络平面. 作者:若禾.昱晟.瑜佳 记者: ...

  10. Serverless 极致弹性解构在线游戏行业痛点

    简介: 本文将通过剖析一个个具体的场景案例,以期望给相关的游戏开发同学带来共鸣,同时也希望能给非游戏行业的同学带来一些启发. 一.前言 1. 游戏客户上云关注点 游戏行业是一个富有创意又竞争激烈的市场 ...