vscode创建vue项目

参考https://blog.csdn.net/weixin_45633422/article/details/115019629和https://teech-lab.com/vue-js-vscode-settings/1041/

vue2.0版本

1. 安装nodejs
2. ctrl+shift+X，安装vetur和Vue.js Extension Pack插件
3. npm install -g vue-cli全局安装vue-cli脚手架构建工具
4. 用vue-cli构建项目，在工程目录打开命令行，运行 vue init webpack firstVue
5. 进入项目根目录(即工程目录/firstVue)，命令行运行 npm install
6. 项目根目录运行命令 npm run dev ，会用热加载的方式运行我们的应用
7. 浏览器打开localhost:8080
8. 将element集成到项目中。项目根目录运行命令npm i element-ui -S，安装完成之后，package.json文件会增加element-ui依赖

列表如下
(1)? Project name (VueTest002)：项目名称name can no longer contain capital letters（不能大写）
(2)? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
(3)? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY 
allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
(5)? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 
这里选择	Standard(https://github.com/feross/standard)
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
(9)Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
(10) Should we run `npm install` for you after the project has been created? 
(recommended) (Use arrow keys)
创建项目后需要需要安装项目所需要的依赖，这里选择no，本步骤作为步骤6说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

-S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D
即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

啥也不写
包名不会进入package.json里面，因此别人不知道你安装了这个包

npm install -d 就是 npm install --save-dev 安装到开发环境 例如 gulp ，babel，webpack 一般都是辅助工具

npm insatll -s 就是npm install --save 安装到生产环境 如 vue ,react 等
1
2
3
4
5
6
7
8
9
10
11
12
13

vue3.0版本

1. 上述步骤里npm install -g vue-cli改成npm install -g @vue/cli
2. 用vue-cli构建项目，vue create demo1，这里会提示选择版本，详情见版本选择
3. cd demo1，npm run serve 运行项目
4. elementui和vue3不兼容，需要运行$ npm install element-plus -S ，参考vue3导入elementui

版本选择

• vue create demo1后选择3.0，默认没有views,stores,routes文件。建议选择manually select features
• check feature时按空格勾选router和vuex
• 设置preset时保存preset，之后可以直接用改模板生成本次的项目结构
  测试vue3导入 element-plu是否成功

//修改src\main.js
import {createApp} from 'vue';
import ElementPlus from 'element-plus'; //需要加入的代码
import App from './App.vue';
import "element-plus/dist/index.css"; //需要加入的代码

let app = createApp(App);
app.use(ElementPlus); //需要加入的代码
app.mount('#app');
1
2
3
4
5
6
7
8
9

//修改src\App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <el-table :data="[]"></el-table>
    <el-button type="success">测试按钮</el-button>
</template>  
1
2
3
4
5
6