vue 学习教程前端

vue 学习教程
目录

vue 学习教程

使用 NPM 安装 vue

什么是 NPM
npm 安装

centos7 下yum安装nodejs
使用 npm 淘宝镜像
vue 命令行工具

使用 vue 命令行工具创建项目

错误处理
启动 vue 项目
开启远程访问
前端访问

vue项目报错

Expected indentation of 4 spaces but found 6
Vue项目中eslint提示 'xxx' is defined but never used
Vue提示Do not use 'new' for side effects错误的解决办法

安装其他第三方包

element-ui
axios

1.下载 vue.min.js 脚本
2.编写 html 测试文件 vuetest.html

Vue测试实例 - 锐客网{{ message }}

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) npmvue-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 DONECompiled successfully in 2137ms2:39:47 AM IYour 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里面添加上如下代码，就可以去掉提示了。