• 如何使用Vue-cli搭建和运行vue项目


    此文章  主要参考:https://jingyan.baidu.com/article/5225f26bbb430fe6fa0908ce.html

    在vue init webpack my-project卡住的问题:在vue init webpack my-project卡住的问题

    手把手教你用vue-cli搭建vue项目:https://www.cnblogs.com/liaoanran/p/8042893.html

    https://blog.csdn.net/qq_37164847/article/details/80926242

    以上的链接都是自己参考  仅供自己学习使用

    node的安装和环境变量的配置参考:

    https://www.cnblogs.com/jiangwenli/p/7338030.html

    https://jingyan.baidu.com/album/48b37f8dd141b41a646488bc.html?picindex=19

    第一步,肯定是安装node.js。根据需要下载安装,安装后如图,然后进行下一步

    1.nodejs安装

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

    选择对应版本的下载。然后傻瓜式一步安装到底。比如我的安装后目录为 
    E:Program Files odejs 
    然后用在cmd 下输入:node -v 查看是否安装成功。如果不行就检查一下环境变量中path有没有nodejs的安装路径。如果没有就手动添加。

    二、查看npm版本 
    在cmd下输入命令:npm -v

     如果低于3.0版本需要进行升级(一般nodejs自带的npm的版本都太低,我在第一次运行的时候就被告知版本太低无法运行) 
    升级方法: 
    在cmd命令下cd到nodejs安装目录,然后输入以下命令:npm update npm 
    这里要等待一下。更新完成后再使用:npm -v检查一下版本

    三、cnpm的安装 
    安装cnpm,由于npm有些资源被屏蔽,儿有些是国外资源的原因, 会导致安装依赖的时候失败,这里安装cnpm国内镜像。cnpm是淘宝的一个镜像,安装之后可以使用cnpm安装命令工具,安装速度会加快。 
    直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org 
    命令安装即可。

    打开命令提示符(win+r),然后进行下一步;本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,

    node -v 检查node是否安装成功

    npm -v 检查npm是否安装成功

    cnpm -v 是否安装成功

    四、安装vue-cli 
    vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 
    安装命令为:cnpm install -g vue-cli,回车,等待安装。 
    安装完后,检查是否安装成功,输入vue -V

     

    五、新建一个Vue项目 

    1、新建一个文件夹vueJs用于存放项目,比如我的路径为E:vue-demos
    2、cd到此文件夹,输入:vue init webpack vue-demo

     

     在E盘的vue-demos就可以看到一个vue-demo

    注意:我在这里遇到一个问题

    在安装完node.js后,也用cnpm代替了npm,然后使用cnpm在node.js的安装路径下安装了vue-cli:cnpm install --global vue-cli。然后使用vue init webpack my-project建立一个项目

    之前安装时在最后一个选项上选择了 npm install ,结果后面卡住了(当时没有去截图),强制退出后,执行npm run dev就报错了。

    最终解决办法就是在最后一个选项上选择No,I can handle it myselft,然后cd my-project,然后cnpm install,这样就成功了,然后执行npm run dev就出现:

     安装所需依赖,进入文件路径,然后执行命令 cnpm install ,等待安装。然后进行下一步:

    如图,依赖完成后,新增node_modules文件夹。然后进入下一步

    至此,项目已经建立,执行npm run dev 运行项目,等待结果:然后进入下一步

    打开浏览器,输入localhost:8080,出现如下,表示启动成功,就可以进行其他开发了

    启动项目
    npm run dev

    发布项目
    npm run build

    【vue】如何在 Vue-cli 创建的项目中引入 iView

    参考:https://www.cnblogs.com/smilexumu/p/7813902.html

    注意:npm 安装插件要在项目的根目录下

    参考:https://www.cnblogs.com/ayseeing/p/3624058.html

    elemtui的引入方式参考

    https://blog.csdn.net/csdnear/article/details/79426915

    后面学习发现这个作者写的比较详细  马住

    https://www.jianshu.com/p/1626b8643676

    安装elmentUI和axios

    npm install axios

    npm i element-ui -S

    在main.js引入

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    import axios from 'axios'
    Vue.prototype.$http = axios

    安装scss

    npm install node-sass sass-loader -D

  • 相关阅读:
    性能测试之开源的性能监控软件
    POJ 2553 The Bottom of a Graph TarJan算法题解
    Spring AOP切面
    [2014.5.22][UBUNTU]Ubuntu与Windows系统时间不同步的问题
    MySQL bug:server-id默认被自己主动置为1
    [Android]Fragment源代码分析(二) 状态
    window nginx 启动无提示错误,却没有listen 80port
    Shell 命令--文件创建、搜索命令--总结自《Linux Shell 脚本攻略》
    freemarker 自己定义指令
    javascript Deferred和递归次数限制
  • 原文地址:https://www.cnblogs.com/wanqingcui/p/9745963.html
Copyright © 2020-2023  润新知