网站的建设哪个好,苏州高端网站建设咨询,家教网站如何做,js弹出网站我也准备要尝试一些前端开发了#xff01;发现网上有些教程写得挺好#xff0c;但是还是有点老#xff08;并且有点错误#xff09;#xff0c;所以这里更新一下#xff1a;
主要参考了这篇教程#xff1a;Vue2——1. 安装教程_vue2 cdn-CSDN博客
并且使用NPM方式进行…我也准备要尝试一些前端开发了发现网上有些教程写得挺好但是还是有点老并且有点错误所以这里更新一下
主要参考了这篇教程Vue2——1. 安装教程_vue2 cdn-CSDN博客
并且使用NPM方式进行安装
上面教程中提到访问node.js官网https://nodejs.org/zh-cn/download 然后就可以看到不同的安装方式。除了这些在ubuntu上还可以这样安装
sudo apt-get update
sudo apt-get install nodejs npm
然后再运行
node -v
npm -v
就可以看到node.js和npm的版本不是很新但是应该是可以用的。
然后按照上面的教程
# 创建项目文件夹
mkdir vue-npm-demo
# 进入项目文件夹
cd vue-npm-demo
# 初始化项目创建package.json文件
npm init -y
就可以看到在文件夹下生成了package.json文件。然后运行
npm install vue2.7.16 --save
和上面那个链接教程不一样我这里安装的是Vue2的最终版。然后可以看到文件夹下面多了node_modules和package-lock.json两个文件夹。--save参数表示将Vue添加到项目依赖中会在package.json文件中记录。
接下来按照这个目录结构创建两个文件夹
vue-npm-demo/
├── node_modules/ # 依赖包目录
├── public/ # 静态文件目录
│ └── index.html # 入口HTML文件
├── src/ # 源代码目录
│ └── main.js # 入口JavaScript文件
├── package.json # 项目配置文件
└── package-lock.json # 依赖版本锁定文件
public和src。并且分别在两个目录下面新建index.html和main.js。前者的内容
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue2 NPM示例/title
/head
bodydiv idapp/div
/body
/html
后者
// 导入Vue
import Vue from vue;// 创建Vue实例
new Vue({el: #app,// render函数用于渲染页面render: h h({template: divh1{{ message }}/h1p当前时间: {{ currentTime }}/p/div,data() {return {message: Hello Vue2 (NPM安装),currentTime: new Date().toLocaleString()}}})
});
其次我们通过npm安装相关webpack相关依赖
# 安装开发依赖
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-template-compiler css-loader style-loader --save-dev
之后在根目录下创建webpack.config.js文件
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const VueLoaderPlugin require(vue-loader/lib/plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: bundle.js},module: {rules: [{ test: /\.vue$/, loader: vue-loader },{ test: /\.css$/, use: [style-loader, css-loader] }]},plugins: [new HtmlWebpackPlugin({template: ./public/index.html}),new VueLoaderPlugin()],devServer: {port: 8080,open: true}
};
在package.json中的scripts部分添加 scripts: {test: echo \Error: no test specified\ exit 1,dev: webpack serve --mode development,build: webpack --mode production},
(增加的是上面字段中的最下面两行
然后就可以运行项目了
npm run dev
结果不出意外的报错了 [webpack-cli] Failed to load /home/quyu/Projects/vue-npm-demo/webpack.config.js config [webpack-cli] Error: Cannot find module vue-loader/lib/plugin 呵呵呵呵简单分析一下怎么回事
感觉是没找到组件的缘故在百度里面搜了一下后一个报错发现Vue2应该装对应版本的vue-loader
npm install vue-loader15.9.7 --save-dev
结果报了另一个错 [webpack-cli] Failed to load /home/quyu/Projects/vue-npm-demo/webpack.config.js config [webpack-cli] Error: Cannot find module webpack/lib/rules/DescriptionDataMatcherRulePlugin 搜了一下可能是因为webpack的版本问题选了一种容易的方法
有时候简单地清理 node_modules 目录和缓存可以解决问题。你可以使用以下命令来做到这一点
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
神奇地发现不报错了但是又有了一个新的问题打开的页面里面什么都没显示按照上面的教程运行结果应该是 浏览器会自动打开http://localhost:8080 页面显示Hello Vue2 (NPM安装)和当前时间 修改代码后页面会自动刷新热重载 看一下开发者工具原来有个报错 vue.runtime.esm.js:4674 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 解决方法也很简单例如这里说的【Vue】You are using the runtime-only build of Vue where the template compiler is not available.-CSDN博客
在main.js文件中将import Vue from vue改为import Vue from vue/dist/vue.esm.js。这个版本中包含了模板编译器可以直接使用Vue的模板功能。
这么改就解决问题了可以看到当前时间。本来觉得那个教程总结得挺好的谁想还是各种问题。今天就简单总结这么多。
