• Idea初始化Vue项目


    环境搭建

    检测是否安装好nodejs和npm

    node -v
    npm -v

    如果没有安装需要先安装node

    nodejs的下载路径:https://nodejs.org/en/download/

    在Windows上安装时务必选择全部组件,包括勾选Add to Path。

    安装完成后,打开命令提示符重新检查版本。

    安装vue.js

    打开cmd,输入:npm install vue

    安装vue-cli,vue脚手架

    npm install -g @vue/cli

    测试是否安装成功

    vue -V

    使用taobao镜像

    在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:

    方法一:输入

    npm i -g cnpm --registry=https://registry.npm.taobao.org

    即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ,如果权限不够,请使用管理员运行命令提示符

    方法二:[推荐]

    npm config set registry https://registry.npm.taobao.org

    设置npm代理,后续直接使用npm install 即可;

    使用idea新建vue项目

    如果没有vue.js选项,idea安装vue.js的插件即可

    使用vue init webpack projectName初始化项目

    projectName是项目名。

    接下来会要求你进行一些选项设置,其实就是初始化项目:

    ? Project name (test)        // 项目名称
    ? Project name test
    ? Project description (A Vue.js project)        // 项目描述
    ? Project description A Vue.js project
    ? Author (villelee)        // 作者
    ? Author villelee
    ? Vue build (Use arrow keys)        // 开始选项设置
    ? Vue build standalone
    ? Install vue-router? (Y/n) Y        // 安装路由
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? (Y/n) Y        // 是否使用ESlint统一代码风格
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset (Use arrow keys)
    > Standard (https://github.com/standard/standard)
    ? Pick an ESLint preset Airbnb
    ? Set up unit tests (Y/n) n        // 是否安装单元测试
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? (Y/n) n        // 是否安装e2e测试
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recom
    ? Should we run `npm install` for you after the project has been created? (recom
    mended) npm
       vue-cli · Generated "test".
    

    最后出现如下代码:

    To get started:
    
      cd test
      npm run dev
    

    说明已经初始化成功,vue-cli已经将必要的依赖包都下好了,可以正常跑起来了。

    $ npm run dev
    
    > test@1.0.0 dev D:ptest	est
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     95% emitting DONE  Compiled successfully in 5547ms11:59:13
    
     I  Your application is running here: http://localhost:8080
    

    相关错误处理

    Can not install 'ij-rpc-client': npm ERR! code ECONNRESET

    详细信息如下:

    Can not install 'ij-rpc-client': npm ERR! code ECONNRESET
    npm ERR! errno ECONNRESET
    npm ERR! network request to https://registry.npmjs.org/ij-rpc-client failed, reason: read ECONNRESET
    npm ERR! network This is a problem related to network connectivity.
    npm ERR! network In most cases you are behind a proxy or have bad network settings.
    npm ERR! network
    npm ERR! network If you are behind a proxy, please make sure that the
    npm ERR! network 'proxy' config is set properly. See: 'npm help config'
    
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersLJAppDataRoaming
    pm-cache_logs2019-11-03T08_31_08_260Z-debug.log
    

    解决办法:

    清除、卸载vue缓存
     npm uninstall -g vue 
     npm uninstall -g vue-cli 
     npm uninstall -g @vue/cli 
     npm cache clean --force 
    
    重新安装 
    npm install vue
    npm install -g @vue/cli
    
    **重点**
    查询、更改npm下载地址
    npm get registry https://registry.npmjs.org/ 
    npm config set registry http://registry.npm.taobao.org/ 
    npm get registry http://registry.npm.taobao.org/
    

    vue init webpack projectName 报错

    错误信息:'git' 不是内部或外部命令,也不是可运行的程序或批处理文件

    下载安装git
    配置git环境变量,将git命令路径添加到PATH,如:C:Program FilesGitin

  • 相关阅读:
    MongoDB用户及数据库管理命令
    Windows 10 Enterprise 2016 LTSB / 2019 LTSC下载与激活
    mongodb 3.6 集群搭建:分片+副本集
    nginx设置目录浏览及解决中文乱码问题
    如何取消Paypal自动付款功能
    Linux硬盘性能测试工具
    用expect实现SCP/SSH自动输入密码登录
    Redmine简易安装与系统优化
    MySQL数据目录(data)迁移
    忘掉Ghost!利用Win10自带功能,玩转系统备份&恢复 -- 系统重置
  • 原文地址:https://www.cnblogs.com/tinging/p/13157685.html
Copyright © 2020-2023  润新知