目录
方式一:全局安装@vue/cli
文档
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
下载使用
- github下载地址:https://github.com/mouday/Vue-Start/archive/refs/heads/master.zip
- 加速地址:https://ghproxy.com/https://github.com/mouday/Vue-Start/archive/refs/heads/master.zip
项目地址: