Vue脚手架的安装与实践

梧桐696

已于 2022-02-12 11:21:39 修改

阅读量188

点赞数

于 2021-10-10 17:52:33 首次发布

本文链接：https://blog.csdn.net/weixin_56105534/article/details/120688881

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.下载node.js

执行vue脚手架的一个平台

1）官网下载

如果是window7系统: 下载安装13的版本 URL: https://nodejs.org/dist/latest-v13.x/

2).安装node.js

之后一路下一步安装即可

3).检查node js版本 node -v

4).检查NPM版本号 npm -v

5).切换淘宝NPM库

1).npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2:
2).npm config set registry https://registry.npm.taobao.org

6).检查镜像配置是否生效 npm config list

7).安装VUE和客户端

命令: npm install -g @vue/cli --force

等待安装完成之后即可

如果出现以下报错：

1）删除上述路径下的node_modules目录

2）执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

2.初始化vue项目

1）初始化UI工程

2）选择vue创建项目

3）选择项目

4）选择功能

选择ESLint+ StandardConfig---字符的校验

项目创建之后效果

3.初始化项目

1）安装插件

安装成功之后会提示配置插件选择手动导入

2）安装axios依赖

点击依赖项--搜索安装

添加依赖项

问题描述

安装开发依赖 less-loader

安装开发依赖 less-loader
npm install less-loader@5.0.0 版本太高不适用
在VUE项目的根目录启动执行安装命令

安装开发依赖 less

安装运行时依赖富文本编辑器

通过客户端的方式安装
有时候可能比较慢,所以需要提前安装
源码网址: https://github.com/surmon-china/vue-quill-editor#readme
组件名称: vue-quill-editor

方式2 通过命令安装
命令: npm install vue-quill-editor --save

说明：关闭ESLint校验

安装运行依赖 echars插件

补充：

1 添加依赖方式

在main.js中添加该操作

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

2 添加html 实现页面展现

 <el-tab-pane label="商品详情" name="4">
            <!-- 定义富文本编辑器-->
            <quill-editor ref="myQuillEditor" v-model="addItemForm.itemDesc" />

          </el-tab-pane>

效果展现

设置富文本编辑器宽度

<template>
  <div>
    <!-- 定义卡片视图 -->
    <el-card>
      <el-row>
        <el-col><h1>数据统计</h1></el-col>
      </el-row>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 100%;height:600px;"></div>

    </el-card>

  </div>
</template>

<script>
  /* 导入echarts组件 */
  import * as echarts from 'echarts';


  export default {
    data() {
      return {

      }
    },
    created(){

    },
    //当页面dom对象初始化之后执行
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
</style>

VUE中环境配置

在根目录中创建文件 vue.config.js 文件

添加环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

VUE项目打包

方式1: 通过express插件将项目打包
命令: 1. npm init -y

命令2: npm i express -S

命令3: 编辑app.js

const express = require('express')

const app = express()

app.use(express.static('./dist'))
app.listen(8090, () => {
	console.log("服务启动localhost:8090")
})

启动命令:

VUE项目优化

1 编辑生产环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      //通过externals 加载外部CDN资源 被修饰的包不会被添加
      config.set('externals',{
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios:  'axios',
        'vue-quill-editor': 'VueQuillEditor',
         echarts:  'echarts'

      })
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

2 引入CDN配置

<!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>
		
		
		<!-- 引入样式表 -->
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
		
		
		<!-- 引入其他JS -->
		<script src="https://cdn.staticfile.org/quill/1.3.6/quill.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/5.1.0/echarts.min.js"></script>
		<script src="https://cdn.staticfile.org/element-ui/2.15.1/index.min.js"></script>
		
  </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 CDN网址

网址: http://www.staticfile.org/

优化后的结果

实现路由懒加载

1 添加插件包

插件名称: babel/plugin-syntax-dynamic-import

2 添加JS文件

文件名称: @babel/plugin-syntax-dynamic-import

配置路由懒加载

官网地址: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
语法结构:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

梧桐696

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue脚手架的安装与实践

1.下载node.js执行vue脚手架的一个平台 1）官网下载如果是window7系统: 下载安装13的版本 URL: https://nodejs.org/dist/latest-v13.x/2).安装node.js之后一路下一步安装即可3).检查node js版本 node -v4).检查NPM版本号npm -v5).切换淘宝NPM库1).npm install -g cnpm --registry=https://regi...
复制链接

扫一扫

专栏目录