一、创建项目

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. HDC2021技术分论坛：吐司盒子？芝士码？HarmonyOS音视频测试来啦

    作者:lifusheng,用户体验技术专家 当下,音视频无处不在,很多设备和应用都涉及音视频.因而,对于HarmonyOS开发者们来说,如何对鸿蒙生态产品进行音视频测试是一个非常重要的问题. 华为Ha ...

  2. HDC2021技术分论坛：HarmonyOS本地模拟器重磅来袭！

    作者:longjiangyun,模拟器开发工程师 HarmonyOS模拟器是应用开发者使用IDE进行代码开发.调试.测试等活动中必不可少的工具,它分为本地模拟器和远程模拟器,其中远程模拟器又分为单设备 ...

  3. centos8 \CentOS 9 Stream rpm 安装mysql8.0.28

    centos8 rpm 安装mysql8.0.28 检查 检测系统是否自带安装 MySQL 命令如下: rpm -qa | grep mysql 如果如下存在已安装的包,就需要卸载 mysql80-c ...

  4. WPF基础：在Canvas上绘制图形

    Canvas介绍 Canvas是WPF(Windows Presentation Foundation)中的一种面板控件,用于在XAML中布置子元素.它提供了绝对定位的能力,允许元素在自由的二维空间中 ...

  5. 快速获取使用dblink的视图的全部字段

    快速获取使用dblink的视图的全部字段 默认情况下,使用dblink连接的视图在PL/SQL是没法通过代码助手获取全部的字段的 如果要获取全部字段的话,可以使用一个奇怪的方法 对要获取的使用dbli ...

  6. Sample HL7 ADT Messages

    Here are a few sample ADT messages for testing that I've picked up over time. I may edit this post l ...

  7. 力扣482(java)-密钥格式化（简单）

    题目: 给定一个许可密钥字符串 s,仅由字母.数字字符和破折号组成.字符串由 n 个破折号分成 n + 1 组.你也会得到一个整数 k . 我们想要重新格式化字符串 s,使每一组包含 k 个字符,除了 ...

  8. 阿里云交互式分析与Presto对比分析及使用注意事项

    阿里云交互式分析与Presto对比分析及使用注意事项本文由阿里巴巴耿江涛带来以"阿里云交互式分析与Presto对比分析及使用注意事项"为题的演讲.文章首先介绍了Presto以及它的 ...

  9. OpenYurt 深度解读｜开启边缘设备的云原生管理能力

    ​简介: 北京时间 9 月 27 号,OpenYurt 发布 v0.5.0 版本.新发布版本中首次提出 kubernetes-native非侵入.可扩展的边缘设备管理标准,使 Kubernetes 业 ...

  10. MaxCompute 存储设计

    ​ 简介: 存储策略该怎么设计 写这篇存储规划的文章主要是想告诉大家该如何给存储做一个规划,在关系数据库的时代存储昂贵且珍惜,掰手指头花钱是存储规划的常态.但是到了大数据时代大家又立即就都变成印美元的 ...