第一类：
1、本地引入
把vue的js文件下载下来引入
2、CDN引入
把vue.js网址引入
3、把vue.js文件放在项目文件夹src中引入项目 然后webpack打包
4、编辑器直接生成cdn的方式
第二类：
5、自己构建vue的脚手架
/* 1.新建项目 alipay 2.初始化配置文件:npm init -y 3.下载依赖: npm i [email protected] [email protected] [email protected] @vue/[email protected] [email protected] [email protected] -D npm i vue -S 4.webpack.config.js配置: */ const path = require('path'); const { VueLoaderPlugin } = require('vue-loader'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'production', watch: true, entry: './src/main.js', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', }, ] }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.html'), filename: 'index.html' }), new VueLoaderPlugin(), ], devServer: { open: true, port: 8080, hot: true, host: '192.168.1.1',（自己的ip） compress: true, }, } //5.项目配置文件 pakage.json文件中: //scripts:{ //"dev": "webpack serve --config webpack.config.js" //} //6.main.js文件: import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') document.body.innerHTML+="444" //7.模板html文件中 <body> <div id="app"></div> <body>
6、使用官方脚手架的方式来构建项目环境
1. cnpm install @vue/cli -g //下载官方脚手架
2. vue create app1 //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者
npm run build //生成的打包文件在dist中 用于项目上线
7、可视化项目管理方式
1. cnpm install @vue/cli -g
2. vue ui
3. 打开的界面 中
4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
5.等待它下载所有配置文件完毕
6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改
8、编辑器直接生成脚手架环境的方式
HbuilderX 创建项目 选择 vue项目 vue-cli默认模板
然后要:npm i
再:npm run serve
标签：npm,VUE,方式,项目,js,webpack,vue,引入,path From： https://www.cnblogs.com/LIXI-/p/16636557.html