主要使用npm+webpack

1、创建项目

mkdir hello-world

npm init

2、创建入口文件

创建src目录，下面创建main.js文件

alert('hello vue')

接着创建index.html文件

<!DOCTYPE html>
<html lang="en">
<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"><title>Vue Webpack</title>
</head>
<body><div id="app"></div>
</body>
</html>

3、安装webpack

npm install -g webpack webpack-cli

4、webpack配置

在根目录下创建webpack.config.js

const path = require('path')module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash].js',clean: true,}
}

5、修改package.json

修改package.json，将scripts修改为如下

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch","build": "webpack"}

6、测试打包是否成功

执行npm run build

7、安装html-webpack-plugin插件

npm install html-webpack-plugin -D

8、修改webpack.config.js

修改后为

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash].js',clean: true,},plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
}

9、安装vue

npm install -g vue vue-router

10、安装vue文件的打包插件

npm install vue-loader vue-template-compiler -D

不使用vue-cli来创建项目相关推荐

通过Vue CLI 4创建项目
1.安装Vue CLI 4 前提是你已经安装了Node(自带npm),Node版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上). Vue CLI 的 ...
Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue ui网页创建项目失败
vue ui网页创建项目失败出现"Cannot set property 'context' of null"错误原因:vue-cli脚手架版本不正确解决方法:我第一次安装的是 ...
vue图形界面创建项目报：GraphQL error: Cannot return null for non-nullable field Mutation.projectCreate，解决方法
1.删除C:\Users\admin\AppData\Roaming\npm-cache中的所有文件,每个电脑路径可能不一样, 总之在/AppData\Roaming\npm-cache下面 2.命令 ...
vue create xxx创建项目过程中报错的解决方法
vue create xxx创建项目过程中报错的解决方法报错图例解决办法报错图例解决办法首先检查电脑里是否安装node.js 检查方法:命令行输入 node -v 还要再输入一个 npm - ...
Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录创建一个项目创建一个项目运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...

不使用vue-cli来创建项目