(Vue笔记)VSCode创建与运行 Vue-cli + @Vue-cli 项目

本文详细介绍了如何使用Vue-cli构建和运行Vue项目,包括Vue-cli2和Vue-cli3的版本区别,以及项目的初始化、依赖安装和启动过程。同时,文章提供了Vue项目的基本目录结构解析,帮助理解每个部分的作用。最后,对可能出现的问题和解决方案进行了说明。
摘要由CSDN通过智能技术生成

目录

1、创建前提

2、Vue-cli构建Vue项目

        2.1、开始构建

        2.2、运行项目

3、@Vue-cli构建Vue项目

        3.1、开始构建

        3.2、运行项目

4、总结


1、创建前提

        已全局中安装vue-cli2 脚手架构建工具,右击“以管理员身份运行”运行Windows PoweShell

         (1)Vue-cli < 3.0版本(不推荐,推荐使用Vue-cli > 3.0版本)

安装Vue-cli < 3.0版本命令:“cnpm install -g vue-cli” 或 “npm install -g vue-cli

卸载Vue-cli < 3.0版本命令:“cnpm uninstall vue-cli -g”或“npm uninstall vue-cli -g

查询Vue-cli < 3.0版本号命令:“vue -V

         (2)Vue-cli > 3.0版本(推荐

安装Vue-cli > 3.0版本命令:“cnpm install @vue/cli -g” 或 “npm install @vue/cli -g

卸载Vue-cli > 3.0版本命令:“cnpm uninstall @vue-cli -g”或“npm uninstall @vue-cli -g

查询Vue-cli > 3.0版本号命令:“vue -V

接下来就开始使用@vue/cli来构建项目


2、Vue-cli构建Vue项目

        2.1、开始构建

       (1)创建Vue项目存放路径:在桌面创建“VueProject”空目录。

        (2)右击“以管理员身份运行”运行Windows PoweShell,cd命令进入到“VueProject”目录中——>备注,本人使用普通cmd权限,创建提示权限错误,无法访问。

        (3)初始化vue并取项目名——>键入“vue init webpack vuedemo01”——>在“VueProject”目录中生成“vuedemo01”文件夹。注意:不能含有大写字母,否则无法进行vue项目初始化操作。

        整个Vue项目的目录结构:

 * build:最终发布的代码存放位置。

 * config:配置路径、端口号等信息,刚开始学习时选择默认配置。

 * node_modules:npm加载项目所需的各种依赖模块。

 * src:开发主要目录(源码),基本要做的事都在这个目录里,里面包含几个目录及文件:

  • assets:放置图片(根据图片大小分类进行base64命名还是其他方式命名),如logo等
  • components:目录里放的是一个个的组件文件
  • router/index.js:配置路由的地方
  •  App.vue:项目入口组件(根组件),我们也可以将组件写这里。        
  • components目录:主要作用是将自定义组件通过它与页面建立联系进行渲染,里面<router-view/>必不可少。
  • main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)

 * static:静态资源目录(会原分不动的对文件进行处理),如图片、字体等。

 * test:初始测试目录,可删除

 * .babelrc:是检测es6语法的配置文件,例:适配哪些浏览器的限制

 * .editorconfig:对代码进行规范,建议定义这个规范。

 * .gitignore:上传到服务器忽略哪些文件的配置

 * .postcssrc.js:前缀的配置 (css转化的配置)

 * index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码或页面的重置样式等。

 * package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息(大概版本)。

 * package-lock.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息(具体版本).

 * README.md:项目的说明文件。

 * webpack.config.js:webpack的配置文件,例:把.vue的文件打包成浏览器能读懂的文件。

注意:以下两个文件不生成在vue项目中,因为在初始化选择Eslint为“No”

.eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

.eslintignore:忽略eslint对项目某些文件的语法规则的检查

    (4)安装项目所需依赖资源:此时项目还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

        右击“以管理员身份运行”运行Windows PoweShell,cd命令进入到“vuedemo01”项目中——> cd C:\Users\ZSAndroid\Desktop\VueProject\vuedemo01

        安装项目所需依赖包+插件(可在package.json中查看依赖清单)——>键入“cnpm install

补充:

        (1)npm install :安装依赖或插件到node_modules目录,安装之前先检查node_modules目录中是否已存在所需依赖或插件。若存在,不下载,本机加载使用,不远再远程下载新资源。

        (2)npm install --force / npm install  -f :强制重新安装依赖或插件,不论是否安装。


        2.2、运行项目

        添加vuedemo01项目到VSCode中

        选择终端(T)——>运行任务...——>npm——>npm:start

注意:如果执行任务出现:“logfile could not be created: Error: EPERM: operation not permitted”,就是Nodejs安装时创建的node_global+node_cache+node_modules,没有授权。

!!!再次执行任务 !!!


3、@Vue-cli构建Vue项目

        3.1、开始构建

        右击“以管理员身份运行”运行Windows PoweShell,cd命令进入到“VueProject”目录中,然后执行“vue create vuedemo02”——>vuedemo02为自定义项目名


        3.2、运行项目

        添加vuedemo02项目到VSCode中

        选择终端(T)——>运行任务...——>npm——>npm:serve


4、总结

仅自己学习记录,如有错误,敬请谅解~,谢谢~~~

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

电竞丶小松哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值