Vue安装与环境搭建及目录结构分析

一、Vue环境安装配置

1、安装git工具,便于在wind电脑上操作命令行,自行在网上下载安装,可以不安装使用cmd命令行

2、安装node,检查node安装是否成功,在git工具中输入node -v

3、检查npm是否安装成功,在git工具中输入npm(npm一般随node一起安装在电脑中,node如果成功了,npm基本都会没问题)

4、cnpm安装参考网站:https://developer.aliyun.com/mirror/NPM?from=tnpm
在git工具中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
检验是否安装成功:cnpm

5、yarn安装参考网站:https://www.jianshu.com/p/4a225dcacd53
git工具输入:npm install -g yarn
检验是否安装成功:yarn -v

6、vue安装:cnpm install vue

7、vue-cli3脚手架工具安装:cnpm install -g @vue/cli或者yarn global add @vue/cli
检查其版本是否正确:vue –version

8、通过图形界面创建vue项目:vue ui

9、control+c终止vue ui

10、在vscode中运行项目:yarn serve
npm install vue-router --save-dev
yarn install
yarn serve
依然可以运行项目

注意事项:在执行第10部时可能遇到的问题

PowerShell yarn : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\yarn.ps1,因为在此系统因为在此系统上禁止运行脚本。

解决方法:
1、搜索powershell,右键以管理员身份运行

2、若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本,请使用以下命令将计算机上的 执行策略更改为 RemoteSigned

执行:set-ExecutionPolicy RemoteSigned
选择 A(全选)

3、关闭命令窗口 即可

二、Vue项目结构

项目结构

|-- node_ modules //模块文件夹,存放package.json中列出的依赖项
|-- public

|-- favicon.ico //网站图标
|-- index.html //入口页面

|-- src

|-- assets //静态文件,比如一些图片,json数据等
|-- components // vue公共组件
|-- views // 以页面为单位的vue文件、html文件等

|-- App.vue // 页面入口文件
|-- main.js // 程序入口文件,加载各种公共组件
|-- router.js // vue的路由管理
|-- store.js // vuex

|-- package.json // 项目基本信息,包依赖信息等
|-- README.md // 项目说明|-- 一些配置文件如.gitnore、yarn.lock等

对于开发者来说,以后 99.99% 的工作都是在 src 中完成的

猜你喜欢

转载自blog.csdn.net/Z_Y_F520/article/details/107483892