新建项目流程:

  1. 新建项目文件夹

javascript新建文件 js文件创建_javascript新建文件

  1. 右击,选择—-》使用命令行窗口打开所在目录(win+r 进入指定目录一样的)
  2. 创建项目,使用vue框架

javascript新建文件 js文件创建_前端_02

  1. 使用JavaScript语言

javascript新建文件 js文件创建_javascript_03

  1. 没报错的话就说明创建项目成功

javascript新建文件 js文件创建_javascript新建文件_04

  1. 进入项目目录,安装依赖

javascript新建文件 js文件创建_javascript_05

至此项目就创建成功啦

  1. 启动项目

javascript新建文件 js文件创建_前端_06

  1. 可以复制连接,打开浏览器查看项目的初始化界面

javascript新建文件 js文件创建_javascript新建文件_07

9. 删除的文件 => .vscode, .gitignore, javascript新建文件 js文件创建_前端_08readMe.md(这几个文件可能会影响我们的操作)

javascript新建文件 js文件创建_开发语言_09

10.项目加载过程:vue文件将由vite进行编译打包成浏览器识别的html+css+js+静态文件,main.js是程序的入口文件,我们可以看到生成了一个名为createapp的vue实例,将他挂载到index.html的id为app的对象上

11.修改main.js文件成

javascript新建文件 js文件创建_javascript_10

12.App.vue是我们项目的根组件,我们可以看到App.vue内的内容和样式就是我们的项目初始化界面

项目基本初始化:

13.在src下创建基础文件夹(可以先不创建,等有需要的时候再创建)

views: 文件夹存放各种界面

components :文件夹存放界面中局部组件

config:文件夹存放各种全局配置

router:文件夹存放路由

api:文件夹存放自定义的api请求函数

store:文件夹存放vuex相关文件

plugins:文件夹存放各种插件

utils:文件夹存放全局工具集(自定义封装的一些函数)

14修改项目页面的标题

javascript新建文件 js文件创建_javascript新建文件_11

15 安装vant ui组件

Vantui的优点:可以快速搭建出风格统一的页面,提升开发效率

Vantui的缺点:vant中有个别组件是以函数的形式提供的,包括toast,dialog,notify和imagepreview组件,使用组件时需要手动导入

javascript新建文件 js文件创建_javascript_12

16.下载按需加载模块

javascript新建文件 js文件创建_javascript_13

17.配置按需加载模块

javascript新建文件 js文件创建_javascript_14

18.安装nutui组件

nutui的优点:

nutui的缺点:NutUI不会像Vant一样自动导入,nutUI的按需自动加

载只有样式文件,所以需要我们手动导入。

Nutui的优点:NutUI 组件丰富,可以满足移动端大多数场景的需求

javascript新建文件 js文件创建_vue.js_15

19安装nutui的按需加载插件

javascript新建文件 js文件创建_开发语言_16

javascript新建文件 js文件创建_javascript_17

20.配置nutui样式按需加载

(这个地方要百分百的小心啊!血的教训,创建两次项目都在这里卡了一下,呜呜呜)

javascript新建文件 js文件创建_前端_18

javascript新建文件 js文件创建_vue.js_19

21.在src路径下新建plugins目录,在plugins目录下新建一个nutUi.js文件

javascript新建文件 js文件创建_vue.js_20

编辑nutUi.js文件

javascript新建文件 js文件创建_前端_21

编辑main.js文件

javascript新建文件 js文件创建_javascript_22

22.配置别名:vite.config.js文件

javascript新建文件 js文件创建_vue.js_23

javascript新建文件 js文件创建_javascript新建文件_24

23.配置全局样式

将项目自带的src/style.css文件删除

在assets/css文件夹下新建文件style.css(空)

删除main.js中老的css,引入新的css

javascript新建文件 js文件创建_开发语言_25

在main.js中导入新的style.css文件

javascript新建文件 js文件创建_开发语言_26

24.配置项目的打包预览:配置vite.config.js文件

javascript新建文件 js文件创建_开发语言_27