环境安装
-
直接引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者可以下载到本地位置，在手动导入
import Vue from './vue.js'或是编辑器直接生成cdn的方式
HbuilderX 创建项目 选择 vue项目普通模式 -
手动安装配置vue脚手架
把vue的代码环境集成了 然后开始在vue的代码环境中写项目,最终才经过webpack打包生成第一类方式
/* 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.2.60', 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> //然后就可以启动了:npm run dev 但是 但是 但是 修改了之后 会等很久才刷新 因为没有配置优化 所以很卡 官方的脚手架配置的特别好 就反应很快 -
下载官方提供脚手架
1. cnpm install @vue/cli -g //下载官方脚手架 2. vue create app1 //项目名称 3. 接下来让你选择一些默认要生成的工具,不管直接回车 4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端 5. 启动: npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段 或者 npm run build //生成的打包文件在dist中 用于项目上线或是利用vue提供的可视化管理工具
cli:vue ui进入到可视化页面点击按钮创建项目或是利用编辑器来手动创建项目
- 创建项目 选择 vue项目 vue-cli默认模板
- 然后要:
npm i cli:npm run serve