Vue-CLI 快速搭建

最新推荐文章于 2023-09-21 23:26:40 发布

一夜星尘

最新推荐文章于 2023-09-21 23:26:40 发布

阅读量5.5k

点赞数

分类专栏：前端文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/weixin_43914658/article/details/120625354

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue-CLI 快速搭建

1.首先安装node.js

2.安装完成node.js后，打开cmd输入如下命令：

npm install @vue/cli -g
vue --version
安装过程可能有点慢，读者可以自行修改镜像源

在这里插入图片描述

3.安装完成后，选择需要建立的Vue项目的文件夹，输入以下命令：

vue create 项目文件夹名称

4.选择Mannully select features（自定义配置选项），回车

在这里插入图片描述

5.自定义配置

1.Babel 主要是将ES6语法解析为ES5语法插件，使之大部分浏览器都支持
2.TypeScript TypeScript语言支持插件
3.Progressive Web App (PWA) Support 用于优化项目的插件
4.Router vue路由插件
5.Vuex 管理组件通信的插件
6.CSS Pre-processors css预处理器插件
7.Linter / Formatter 代码格式强制规范插件
8.Unit Testing 代码测试插件
9.E2E Testing 需求界面测试插件

在这里插入图片描述
如果读者选择了CSS Pre-processors，出现以下需要配置的选项，读者根据需要选择即可

在这里插入图片描述
如果读者选择了Linter / Formatter

在这里插入图片描述

编辑保存之后根据对代码格式进行检测
在这里插入图片描述
选择独立文件存储

成功构建后，修改如下代码：

index.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">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js:

import { createApp } from 'vue'
import App from './App.vue'

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

App.vue:

<template>
  <Counter></Counter>
</template>

<script>
  import Counter from './components/Counter.vue'

export default {
  name: 'App',
  components: {
    Counter
  }
}
</script>

<style>
body {
  background: gray;
}
</style>

Counter.vue:

<template>
  <p id="font">当前计数器的值为：{{count}}</p>
  <div>
    <button class="btn" @click="increase">+</button>&nbsp;
    <button class="btn" @click="decrease">-</button>
  </div>
</template>

<script>
  export default {
    name: "Counter",
    data(){
      return {
        count:0
      }
    },
    methods:{
      increase(){
        this.count ++
      },
      decrease(){
        this.count --
      }
    }
  }
</script>

<style scoped>
.btn{
  height:60px;
  width:100px;
  font-size: 30px;
}
#font{
  font-size:40px;
  color:blue;
}
</style>

项目根目录下新建vue.config.js:

module.exports = {
  publicPath: './',
};

查看package.json配置：

在这里插入图片描述

来到当前项目文件夹，输入如下命令：

npm run serve

打开浏览器，显示

在这里插入图片描述

最后，执行打包命令：

npm run build

生成dist文件夹，也就是最终的产品：

在这里插入图片描述

有疑问可以直接查看：Vue CLI

一夜星尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-CLI 快速搭建

1.首先安装node.js2.安装完成node.js后，打开cmd输入如下命令：// An highlighted blockvar foo = 'bar';
复制链接

扫一扫

专栏目录

Vue-CLI 快速搭建

Vue-CLI 快速搭建

“相关推荐”对你有帮助么？