目录

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、总结

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

Logo

前往低代码交流专区

更多推荐