一、下载及安装node.js

    1)登陆官网https://nodejs.org/en/直接下载

     

     2)下载完成后,傻瓜式安装,一直next。。。

     3)检查安装

        a.打开命令行工具,输入node -v出现下图版本号,就说明安装成功

        

        b.打开命令行工具,输入npm -v出现下图版本号,就说明安装成功

        

二、安装vue脚手架

    全局安装vue-cil,也就是所谓的脚手架

    1)用npm安装(国际开源库生态系统) npm install -g vue-cli

    2)vue -V)记住这里的-V是大写字母V,出现版本号说明安装成功

三、创建测试项目

    1)首先需要用cd指令进入项目目录进行搭建项目的文件夹

     

    2)创建vue项目:vue init webpack vueteat

     

    注:中途遇到停顿,按回车键进行下一步

填写每项数据信息描述:

Project name (vuetest)          项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)

Project description (A Vue.js project)  项目描述,也可直接点击回车,使用默认名字

Author (........)       作者,不用说了,你想输什么就输什么吧

接下来会让用户选择

Runtime + Compiler: recommended for most users    运行加编译,既然已经说了推荐,就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时,已经有推荐了就选择第一个了

Install vue-router? (Y/n)    是否安装vue-router,这是官方的路由,大多数情况下都使用,不过我的第一个项目中的路由是自己写的,没有使用到官方路由,因为有特殊需求,也因为比较早,官方尚未成熟,vue-router官网 。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,一般项目中都会使用。ESLint官网

接下来也是选择题Pick an ESLint preset (Use arrow keys)            选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint

Standard (https://github.com/feross/standard)    标准,有些看不明白,什么标准呢,去给提示的standardgithub地址看一下, 原来时js的标准风格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法

none (configure it yourself)    这个不用说,自己定义风格

具体选择哪个因人而异吧  ,我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试,我选择安装

Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ,我选择安装

四、各项目目路的作用

    1. build文件夹:打包配置的文件夹

      1.1  webpack.base.conf.js :打包的核心配置

      1.2  build.js:构建生产版本,项目开发完成之后,通过build.js打包(加载base与prod,读取完之后通过webjpack命令对项目进行打包)

      1.3  webpack.prod.conf.js:被build.js调用,webpack生产包的一个配置。基础代码都在1.1里面写,1.3是对1.1的扩展与补充

      1.4  dev-client.js:热更新的插件,进行对客户端进行重载

      1.5  dev-server.js:服务器。(背后的原理是启动一个express框架,这是一个基于node做的一个后端框架,后端框架可以在前端起一个服务)

      1.6  vue-loader.conf.js:被base加载,

      1.7  utils.js:工具类,公共的配置

    2. config文件夹:打包的配置,webpack对应的配置

      2.1 index.js:可与1.1合并成一个文件,但由于spa想做一个清晰的架构,因此把它们拆分开了

    3. src文件夹:开发项目的源码

    4. App.vue : 入口组件

    5. static文件夹:静态资源,图片

    6. .babelrc:ES6解析的配置

    7. .gitignore:忽略某个或一组文件git提交的一个配置

    8. index.html:单页面的入口,通过webpack的打包构建之后,会对src源码进行编译,最终把它们插入到html里面来

    9. package.json:基础配置,告诉我们项目的信息(版本号、项目姓名、依赖)

    10. node_modulues:项目的安装依赖

Logo

前往低代码交流专区

更多推荐