js：Vue.js快速原型开发方案@vue/cli

(目录)

方式一：全局安装@vue/cli

文档

• https://cli.vuejs.org/zh/guide/

npm install -g @vue/cli

# 查看版本
vue --version

# 创建项目
vue create hello-world

以上方式有一个缺点，需要全局安装命令行工具，而且安装依赖的时候有点慢，如果只是想简单快速的测试某个小功能，有点不划算。

虽然有快速原型开发 的方式，有时候又觉得不够完整，会提示一些奇怪的错误

vue serve

方式二：局部安装最小依赖

通过手动新建目录文件的方式，自己安装依赖

项目结构

$ tree -I node_modules
.
├── package.json
├── public
└── src
    ├── components
    ├── views
    ├── App.vue
    └── main.js

package.json

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "element-ui": "^2.15.11",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.8",
    "vue-template-compiler": "^2.6.14",
    "less": "^4.0.0",
    "less-loader": "^8.0.0"
  }
}

src/main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue

<template>
  <div class="">

  </div>
</template>

<script>
// created at 2022-12-26
export default {
  name: 'App',

  props: {},

  components: {

  },

  data() { 
    return {

    }
  },

   computed:{

   },

  methods: {
       async getData() {
       }
  },

  created() {
     this.getData();
  }
 }
</script>

<style lang="less">

</style>

<style lang="less" scoped>

</style>

快速安装依赖

pnpm i

启动开发环境

npm run dev