前言:1.前一阵子断断续续的学习,没有系统的整理思路,学下来记录一下。
2.本人是phper js不好,学这个只是为了写个前后端分离的后台。只适合新手参考。只适合新手参考。只适合新手参考。
一、建议直接用脚手架,script引入有很多东西用起来不方便。
二、Ubuntu 安装vue-cli (我的是Ubuntu18.04)
1.sudo apt install npm (需要升级) sudo npm install npm@latest -g 升级到最新版本 查看版本(npm -v node -v)
2.sudo npm install -g n 安装用于安装nodejs的 n 模块 sudo n lts 升级node到最新稳定支持版本
(sudo n v8.11.3 )安装指定版本的nodejs
3.sudo npm install --global vue-cli 安装Vue脚手架 查看版本 ( vue -V )
ps:window系统 从官网下载安装文件 安装好了以后用window自带的 powerShell 往下进行
三、开始创建第一个Vue项目
1.npm install-g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像
2.sudo mkdir /srv/vue 新建一个vue项目文件夹(也可以是其他位置)
3.cd /srv/vue
vue init webpack my-project 一路根据提示回车 或者 Y就可以
4.cd my-project 进入创建的项目目录
sudo cnpm Install
sudo cnpm run dev
5.然后会看到 http://localhost:8080 浏览器打开 这个链接 就可以看到第一个项目的样子。
四、接下来要开始看代码了
1. cd /srv/
sudo chmod -R 755 vue/ 给项目写入的权限
2.用编辑器打开项目 my-project 我们新手们 一般只操作 src文件夹下的文件。。(我用的webstorm)
3.我们可以发现 显示都是.vue文件 而且可以重复利用固定的模板
<template></template><script></script><style></style>
4.可复用性
import Hellofrom "./components/Hello"
export default {
name: "App",
components: {
Hello,
},
}
5.这些都比较简单 可以跟着 菜鸟教程 走一遍就可以
五、未完待续...