• 从零构建vue项目(一)--搭建node环境,拉取项目模板


    本文是基于vuecli2搭建的项目.

    1. 下载安装nodejs    

      地址:https://nodejs.org/en/download/

      选择安装版windows .msi, 不要选择压缩版 

      下载完成后,下一步-->下一步-->安装完成

        npm:  node pageage mangemen node.js的包管理器集成到node.js中了.

      验证node是否安装成功:

        打开命令行(windows)或终端(mac),在命令行(终端)中输入:

        node -v 如果提示出版本信息则说明node安装成功

        npm -v 如果提示出版本信息则说明npm安装成功

      如果输入npm -v没有反应删除C:Users{账户}下的.npmrc文件就可以了.

    2. 安装淘宝镜像

    在终端输入:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

    根据提示输入密码,等待安装成功

    验证淘宝镜像是否安装成功:

    在终端输入cnpm -v  如果提示出版本信息则说明cnpm淘宝镜像安装成功

    cnpm安装成功后,以后npm install 命令用cnpm install代替.

    也可以全局安装yarn, 后续用yarn命令

    3. 安装yarn

      yarn是一个包管理器, 与npm很多功能都是相同的,数据格式也一致,并且更加轻量化, 命令也比较简洁, 所以包管理器可以在npm和yarn中选其一.

      详见yarn官方文档

    4. 安装vue脚手架:

      vue-cli:基于node.js的开发环境的脚手架.

      脚手架:有人将开发过程中用到的工具和环境都配置好了,直接可以做开发而不用考虑搭建这些工具环境了.

      在终端中输入命令: cnpm install vue-cli –g (mac中有install的全部要加sudo)

        (-g全局安装,全局安装即就将当前的工具安装在了node的安装目录下)

      验证vue-cli是否安装成功:

      在终端输入vue -V  如果提示出版本信息则说明vue-cli安装成功

    ---------------以上步骤都是工具,只需安装一次,以下步骤是每个项目的过程----------------

    5. 拉取项目模版

    新建一个存放项目的文件夹(如:Vue_Code7),在该文件夹下打开终端

    通过下面的简单的Linux命令进入到指定的文件夹:

                 ls  列出当前所在目录下的所有文件及文件夹

                 cd xxx 进入到当前目录下的指定的文件夹

                 cd ../ 返回上一级目录

     

    在指定文件夹下打开终端后,在终端中输入:

                 sudo vue init webpack my-project

                 (webpack是官方模版,my-project是自定义的项目名称)

                 也可以自定义模板

     

                 回车 intall vue-router? 是否装vue-router(看项目需要)

                            Use ESLint to lint your code? n

                           Set up unit tests 是否安装小测试

                           Pick a test runner

                           Setup e2e tests with Nightwatch? 

                           Should we run 'npm install' for you after the...? no,I will ....进入第5

    6. 下载安装项目依赖

    如果在拉取模版时没有下载安装依赖,则需要执行如下操作

    1)进入项目所在的项目文件夹 

                 cd my-project(项目名称)

                 新打开的项目需要先安装下依赖

    2)通过下面的命令安装依赖:

                 sudo cnpm install

    3) mac系统无法保存,打开项目根目录,显示简介,解锁,全部修改为读与写,应用到所有项目,上锁.

                   npm是国外服务器的,用来安装很慢, cnpm是淘宝镜像,用来安装很快

    7.启动项目

    在项目文件夹下打开终端,运行下面的命令:

    npm run dev

      如报错,试下下面的命令:

      npm install --save-dev webpack-dev-server@2.9.7

     

      启动完成将会提示http://localhost:8080这样的地址,也就是运行地址.

      在package.jsondev中配置--open 'Google Chrome'就会自动打开浏览器运行,不加浏览器名就是打开默认浏览器.

        "scripts": {

          "dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",

        ...}

     

      windows系统打开根目录,选中文件右键打开命令窗口

      mac:系统偏好设置,键盘,快捷键,服务,终端勾选.打开根目录,选中文件右键打开命令窗口

     

    修改运行的端口和域名,可以在config/index.js中修改:

    dev{

                 host: '127.0.0.1',    // can be overwritten by process.env.HOST

                 port: 8080,

    }

    8. 项目运行的流程

        第一步:执行npm run dev,

        即执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

        第二步:使用webpack工具(打包捆绑工具)根据build/webpack.dev.conf.js配置文件将项目打包到内存中

        webpack根据配置文件加载所配置loader对入口文件及其所引用到的文件进行编译,

        编译完成后webpack根据入口出口配置,将所有用到的文件打包到出口文件(app.js)

        在利用所配置的插件(HtmlWebpackPlugin)将出口文件自动插入到项目中的index.html

        最后在项目目录下启动devServer服务器

      第三步:服务启动后,自动打开项目下的index.html文件,用浏览器执行起来.

  • 相关阅读:
    Cheatsheet: 2010 05.25 ~ 05.31
    Cheatsheet: 2010 07.01 ~ 07.08
    Cheatsheet: 2010 07.22 ~ 07.31
    Cheatsheet: 2010 06.01 ~ 06.07
    Cheatsheet: 2010 05.11 ~ 05.17
    Cheatsheet: 2010 06.08 ~ 06.15
    Cheatsheet: 2010 06.16 ~ 06.22
    Cheatsheet: 2010 06.23 ~ 06.30
    2020.7.20第十五天
    2020.7.19第十四天
  • 原文地址:https://www.cnblogs.com/qiezuimh/p/11365370.html
Copyright © 2020-2023  润新知