教程目录
0x00 教程内容
- 准备环境
- vue-cli入门例子
- vue简单入门例子
1. 安装nvm(node与npm)
a. 请参考教程:Node版本管理工具nvm的安装与使用(windows)
b. 按流程下载相对于版本的node即可,也会默认安装好对应版本的npm
2. 安装vue-cli
a. 查看当前node.js版本node --version
b. 全局安装vue-cli
(vue开发脚手架),i表示安装,-g
表示全局npm i -g vue-cli
安装指定版本,则如:npm i -g vue-cli@x.x.x
PS:vue-cli
3.x版本之后使用以下方式:npm i -g @vue/cli@4.1.2
c. 查看vue版本:vue --version
1. 初始化vue-cli
a. 在想要创建项目的路径下右键,选择“Git Bash Here
”(需安装Git软件),然后初始化vue-cli
:vue init webpack vue_sny
解释:
初始化一个基于webpack模板的项目,项目名为:vue_sny
b. 回车后会提示输入信息,括号里面的内容为默认的,回车则选中:
解释:
Project name (vue_sny):项目名称,直接回车,选中括号中的默认名字(名字不能有大写字母,否则会报错)
Project description (A Vue.js project):项目描述,可直接点击回车
Author ():作者,直接回车
Runtime + Compiler: recommended for most users 官方推荐,选中
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere :直接选推荐的
Install vue-router? (Y/n) :是否安装vue-router为官方的路由,这里可选可选可不选,要用到的话就要选Y。
Use ESLint to lint your code? (Y/n) :是否使用ESLint管理代码,ESLint是代码风格管理工具,是用来统一代码风格的,一般会使用,如果觉得黄色的警告很难看,可以关掉,也可以安装完成后在配置文件里关掉。
Pick an ESLint preset (Use arrow keys) :选择一个ESLint预设,编写vue项目时的代码风格,直接Y回车
Setup unit tests with Karma + Mocha? (Y/n) :是否安装单元测试,这里可选可选可不选,要用到的话就要选Y。
Setup e2e tests with Nightwatch(Y/n)? :是否安装e2e测试 ,这里可选可选可不选,要用到的话就要选Y。
c. 大概需要两分钟,屏幕上会出现三行代码指引:
To get started:
cd vue_sny
npm run dev
意思是进入到当前路径下的vue_sny
目录,然后执行用npm执行项目,我们并没有创建vue_sny
目录,为自动创建的,可以自己去路径下看一看是否真的存在。
2. 启动vue-cli项目
a. 执行并启动上面两条指令,提示项目的启动端口:http://localhost:8080
(可能会弹出提示,选“允许访问”)
b. 打开ip地址可看到启动的项目:
3. 项目结构介绍
a. 请参考官网,不同版本不一定相同
4. 简单配置介绍
a. 修改端口(vue_sny/config/index.js
)
- 有时候我们后台项目也会默认使用
8080
端口,会跟我们前端端口冲突,所以我们可以修改端口成其他端口,打开浏览器时修改成其他端口访问即可,我这里使用8880
。
ps:每次修改配置文件后要记得重新执行启动项目的指令才生效npm run dev
5. 简单修改项目
a. 打开App.vue
文件,将里面的内容删成:
<template>
<div id="app">
<pre>
邵奈一: shaonaiyi@163.com
wechat:shaonaiyi888
csdn:https://blog.csdn.net/shaock2018
</pre>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
b. 打开端口,可看到相关信息:localhost:8880
1. 新建html页面
a. 新建一个项目或者在电脑任何路径下新建一个html文件,并编辑内容,这是脱离了上面安装的环境的。
b. 这里使用CDN的方式(https://www.bootcdn.cn/)引入vue<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
2. 编写代码
a. 编写csdn类,构建Vue类,绑定数据name
b. 完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
</head>
<body>
<div class="csdn">
{{name}}的技术博客CSDN:https://blog.csdn.net/shaock2018
</div>
<script>
new Vue({
el: '.csdn',
data: {
name: '邵奈一'
}
})
</script>
</body>
</html>
3. 预览结果
a. 以浏览器方式打开,可看到{{name}}
,其实是输入了shaonaiyi
:
- 本教程主要介绍两个例子,通过对比学习,更有利于学习,其实我们vue-cli例子只是第二个例子的复杂实现而已。
- 重要的还是环境要搭建起来,虽然我们也可以使用cdn引入vue,但项目开发过程中,环境可让人事半功倍。
- 可以在config/index.js里把useEslint:设置为false,看着黄黄的警告信息不开心哈哈。
- 可以在谷歌浏览器里面安装Vue Devtools插件,这样子开发界面时保存会立即刷新,不用手动刷新,加快开发效率。
问题:打包后无法在项目里面预览
解决:修改打包后的路径(vue_sny/config/index.js)assetsPublicPath: '/',
将‘/’前加个点:assetsPublicPath: './',
- 如果不修改,打包后,外部引入的 js 和 css在本地无法打开的,因为路径没有映射上。当然,如果将打包后路径放到服务器上是没有问题的。
- ps:请注意!!!本教程不修改,而是打包的时候再改!!!
作者简介:邵奈一
全栈工程师、大学市场洞察者、专栏编辑
公众号、微博、CSDN:邵奈一
本系列课均为本人:邵奈一原创,如转载请标明出处