Vue 环境安装及脚手架

Vue 环境安装：

Vue 是插件

npm install -g @vue/cli

或

cnpm -i -g @vue/cli

以上命令 -g 表示全局安装

即使之前安装过，重新下载安装也没有问题，会直接覆盖之前的版本

或者可以先删除之前的安装目录文件，再重新安装，要删除可以使用命令 which -a vue

which -a node 查看 node 安装目录 which -a vue 查看 vue 安装目录

然后进入安装目录直接删除即可。 rm -rf 待删除目录

安装成功后 执行命令 vue —version 查看安装版本

创建项目的命令：

vue create mall

执行这个命令如果报如下错误：

Vue CLI v4.4.6 ✨ Creating project in /mall. ERROR Error: EACCES: permission denied, mkdir '/mall' Error: EACCES: permission denied, mkdir '/mall' at Object.mkdirSync (fs.js:748:3) at Object.mkdirsSync (/usr/local/lib/node_modules/@vue/cli/node_modules/fs-extra/lib/mkdirs/mkdirs-sync.js:31:9) at /usr/local/lib/node_modules/@vue/cli/lib/util/writeFileTree.js:24:8 at Array.forEach (<anonymous>) at writeFileTree (/usr/local/lib/node_modules/@vue/cli/lib/util/writeFileTree.js:22:22) at Creator.create (/usr/local/lib/node_modules/@vue/cli/lib/Creator.js:157:11) at processTicksAndRejections (internal/process/task_queues.js:89:5) at async create (/usr/local/lib/node_modules/@vue/cli/lib/create.js:72:3)

是权限问题需要以管理员身份运行

sudo vue create mall

默认安装 babel 和 eslint还是自己手动安装，可以默认安装

babel：主要是编译 ES6的语法，

eslint：帮助我们做项目检查

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n63" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background-color: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: initial initial; background-repeat: initial initial;">​
​
Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)
​
​
Vue CLI v4.4.6
✨ Creating project in /mall.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
​
yarn install v1.17.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
​
​
​
success Saved lockfile.
info To upgrade, run the following command:
cd mall
$ yarn serve</pre>

安装成功后，按照提示进行后续步骤。

第一步 cd mall，第二步 yarn serve 就把项目跑起来了 或 cnpm run serve

serve 只是一个脚本，你只要能运行它就行，所以 使用 yarn 还是 cnpm 取决于你安装了啥，都可以运行起来

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n71" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background-color: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: initial initial; background-repeat: initial initial;"> DONE Compiled successfully in 2464ms 下午5:29:04
​
​
App running at:

• Local: http://localhost:8081/
• Network: http://10.10.10.121:8081/
  ​
  Note that the development build is not optimized.
  To create a production build, run yarn build.</pre>

访问 http://localhost:8081/

效果如下所示：

[图片上传失败...(image-ed227f-1596416446085)]

以上是通过脚手架帮我们初始化的项目—已经是一个 SPA 架构的项目了

通过脚手架初始化项目我们就不用在本地重复搭建一堆配置信息

到这里项目就启动完毕了

接下来要使用 VUE脚手架的界面UI 功能

通过命令 vue ui 的方式去启动这套系统。这个是脚手架内置的可视化的系统，类似于 git 的 sourceTree 可视化系统

效果如下：这个是VUE 脚手架内置的一套可视化系统---可以使用也可以不使用，就像可以使用git sourceTree 也可以直接使用 git 终端命令。

[图片上传失败...(image-3776e4-1596416446085)]

上面我们直接执行命令 sudo vue create mall 创建了项目，其实也可以直接先启动视图 vue ui

然后在可视化操作界面 进行项目的创建，如上图中的第二个 Title，本例中是提前创建好的项目，所以在可视化界面中直接导入即可，如图中第三个 Title，导入后就来到了我们项目的功能页面，如下图所示：

[图片上传失败...(image-46d58-1596416446085)]

可以在项目控制台中杀掉一些端口进程，如本例中的 8081端口进程

[图片上传失败...(image-455656-1596416446085)]

进程成功被干掉了：

[图片上传失败...(image-569e5b-1596416446085)]

还可以看到一些内置的框架插件

[图片上传失败...(image-2a2e3e-1596416446085)]

这些插件辅助我们项目开发，最终是不会被编译到项目中的。打完包之后，包里面是不会有这些插件存在的。

还可以看到一些依赖：

[图片上传失败...(image-f4c9f4-1596416446085)]

这些是会被打到我们项目中去的，分为运行依赖和开发依赖；运行依赖如果不打到项目中去，我们的 VUE 项目是跑不起来的。开发依赖的话也是一些辅助性的依赖

然后是一些配置信息的自定义：

[图片上传失败...(image-80c2f0-1596416446085)]

第一块是配置信息，第二块的话是语法检查，默认开启的，建议开启进行一些语法的提前检查。

接下来是一些脚本执行的可视化界面：

[图片上传失败...(image-212e76-1596416446085)]

可以在这里启动，停止项目，启动后直接点击，启动App访问项目。

如果在 VUE 控制台中执行 bulid 脚本的时候报如下错误，那是项目文件只有只读权限，需要修改文件夹权限为可读可写。

[图片上传失败...(image-d76cbe-1596416446085)]

执行命令 sudo chmod -R 777 你的文件夹名 修改文件夹权限后，在bulid就可以了

[图片上传失败...(image-e022e9-1596416446085)]

在控制台中，可以直接点击编辑器打开就会唤起本地合适的编辑器打开项目源码：

[图片上传失败...(image-4a4d8a-1596416446085)]

如我默认的继承开发软件 Intellij

打包的内容就在 dist文件夹下—这个打包后内容在什么文件夹下也是可以自定义的，默认就是 dist文件夹

[图片上传失败...(image-2248ac-1596416446085)]

以上便是对 VUE 脚手架可视化系统的介绍。

在脚手架可视化系统中建好项目之后，如果不是自己想要的位置可以将建好的项目内容复制到指定的位置：

cp -r /mall/ /Users/wsq/Documents/front-end-project/MiMall/