创建项目的方法

最新推荐文章于 2024-04-26 16:15:50 发布

原创最新推荐文章于 2024-04-26 16:15:50 发布 · 913 阅读

CC 4.0 BY-SA版权

本文介绍了两种创建项目的方法：手动创建和使用Vue CLI。手动创建涉及npm初始化、配置package.json、安装webpack等步骤。Vue CLI则需安装最新版本，通过vue create命令快速创建项目，并可自定义依赖包。在CLI创建的项目中，可以通过vue.config.js来扩展配置。

创建项目的方法

文章目录

创建项目的方法
- 手动创建
- vue脚手架创建

手动创建

1、使用npm init 初始化生成package.josn文件
2、对pankage.josn文件进行配置

  "scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },

3、下载webpack 和webpack-cli包
4、创建src目录，并创建index.js文件作为主文件
5、使用npm run dev 打包生成dist文件夹，
并在文件夹中添加index.html文件，并引入入口文件（一般默认是main.js）
6、根据实际情况在src文件夹下创建不同功能文件夹

vue脚手架创建

安装@vue/cli
node 版本要求： >8.9，推荐使用8.11.0 +。

关于旧版本：
如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x)，那么需要先卸载掉。
运行：npm uninstall vue-cli -g 或 yarn global remove vue-cli。

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，可以在命令行中访问vue命令。

检查版本是否正确：

vue --version

1、使用命令行工具 vue create xxx（项目名称）
2、选择依赖包
3、使用进入项目文件夹
4、使用 npm run serve

vue自动隐藏了webpack.config.js，我们想添加可以在更目录下新建一个vue.config.js文件

删除预设依赖：C盘-用户-Adiministartor-vuerc，在vscode中删除配置选项