vue 学习教程
目录
1.下载 vue.min.js 脚本
2.编写 html 测试文件 vuetest.html
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
3.将 vuetest.html 和 vue.min.js 存放在同一个 Linux 目录**(/mnt/html/)**下
4.使用 python 在当前目录**(/mnt/html/)**下启动一个HTTP服务
python -m SimpleHTTPServer 8080
5.使用浏览器访问该http服务
http://192.168.7.73:8080/vuetest.html
这种方法可以快速测试 vue 脚本能否正常工作，但是在搭建大型项目时，不推荐使用该方法，vue提供了快速搭建大型项目的命令工具vue-cli。
使用 NPM 安装 vue
什么是 NPM
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
npm 安装
可以通过安装nodejs 附带着安装npm
centos7 下yum安装nodejs
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
yum install -y nodejs
[root@bogon nodejs]# node -v
v12.18.3
[root@bogon nodejs]# npm -v
6.14.6
使用 npm 淘宝镜像
国内直接使用 npm 的官方镜像是非常慢的，推荐使用淘宝 NPM 镜像。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后，就可以使用cnpm 来安装模块了。
[root@bogon nodejs]# cnpm install vue
✔ Installed 1 packages
✔ Linked 0 latest versions
✔ Run 0 scripts
✔ All packages installed (1 packages installed from npm registry, used 437ms(network 436ms), speed 1.92MB/s, json 1(30.74kB), tarball 825.22kB)
[root@bogon nodejs]# ls
node_modules
[root@bogon nodejs]# cd node_modules/
[root@bogon node_modules]# ls
vue _vue@2.6.11@vue
全局安装 vue
[root@bogon nodejs]# cnpm install --global vue
Downloading vue to /usr/lib/node_modules/vue_tmp
Copying /usr/lib/node_modules/vue_tmp/_vue@2.6.11@vue to /usr/lib/node_modules/vue
Installing vue's dependencies to /usr/lib/node_modules/vue/node_modules
All packages installed (used 2ms(network 1ms), speed 0B/s, json 0(0B), tarball 0B)
vue 命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-cli
$ cnpm install --global vue-cli
使用 vue 命令行工具创建项目
# 创建一个基于 webpack 模板的新项目
vue init webpack vuepjt-test
# 这里需要进行一些配置，默认回车即可
? Project name vuepjt-test
? Project description A Vue.js project
? Author pxbf
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vuepjt-test".
# Installing project dependencies ...
# ========================
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
[ .................] | fetchMetadata: sill fetchPackageMetaData error for electron-to-chromium@^1.3.47 Unexpected end of JSON input while parsing near '...uCerYrm\nyjFg\r\n=8pj'
错误处理
长时间停留在 fetchMetadata: sill mapToRegistry…
[ .................] | fetchMetadata: sill fetchPackageMetaData error for electron-to-chromium@^1.3.47 Unexpected end of JSON input while parsing near '...uCerYrm\nyjFg\r\n=8pj'
解决方法
npm config set registry https://registry.npm.taobao.org
#配置后可通过下面方式来验证是否成功
npm config get registry
#或npm info express
启动 vue 项目
cd vuepjt-test
[root@bogon vuepjt-test]# npm run dev
> vuepjt-test@1.0.0 dev /home/vue/vuepjt-test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 26/31 modules 5 active ...x=0!/home/vue/vuepjt-test/src/App.vue{ parser: "babylon" } is depr 95% emitting
DONE Compiled successfully in 2137ms 2:39:47 AM
I Your application is running here: http://localhost:8080
开启远程访问
vim config/index.js
# 修改 host 为
host: '0.0.0.0',
# 保存退出
npm run dev
前端访问
vue项目报错
Expected indentation of 4 spaces but found 6
在vue项目中找到build文件夹 --> webpack.base.conf.js --> module，作如下修改：
module: {
rules: [
// 把下面这行注释掉，把 eslint 关闭
// ...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
Vue项目中eslint提示 ‘xxx’ is defined but never used
找到.eslintrc.js文件，在rules里面添加上如下代码，就可以去掉提示了。
"no-unused-vars": 'off'
rules: {
'no-unused-vars': 'off'
}
Vue提示Do not use ‘new’ for side effects错误的解决办法
- 方法一
在错误地方上加/ eslint-disable no-new /绕过规则检测
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 方法二 替代用法
let vm = new Vue({
router,
el: '#app',
render: h => h(App)
})
Vue.use({
vm
})
安装其他第三方包
element-ui
安装element-ui
npm install element-ui -S
axios
npm install axios
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
