npm创建vue项目


1. 安装node.js

   地址:https://www.runoob.com/nodejs/nodejs-install-setup.html

   查看版本:node --version

   

   查看npm版本: npm -v

   

   安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org  

 

2. 安装VUE-CLI脚手架

vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vuewebpack的项目。

安装脚手架:npm install -g @vue/cli     cnpm install vue-cli -g

注:-g代表全局安装

查看版本(是否安装):vue -V

3. 创建一个基于webpack模版的项目

1) Vue项目初始化命令如下,若没有安装webpack则先安装webpack

     npm install -g webpack

 

2)   创建项目

     Vue init webpack myVue     

       注:安装过程中有个选项(Use ESlint to line your code?选择No

      

 

 

      运行初始化命令的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息,如果不想填写回车默认就好.

l Project name (my-vue):项目名称

l Project description (A Vue.js project)项目描述一个Vue.js项目

l Author:作者

l Install vue-router?(Y/n):是否安装Vue路由,也就是以后是spa(单页面应用

l Use ESLint to lint your code?(y/n):使用ESlint到你的代码?(y/n

l Pick an ESlint preset(Use arror keys):选择一个预置ESLint(使用箭头)

l Setup unit tests with Karma +Mocha?(y/n):设置单元测Karma +Mocha?(Y/N)

l Set e2e tests with Nightwatch?(y/n):设置端到端测试,NightWatch?(y/n)

注:这些都看个人情况设置

初始化完后的vue项目目录如下:

   

3) 进入到myVue目录下,使用npm install 安装package.json包中的依赖,命令如下:

cd myVue

npm install

4)  运行项目

  npm run dev    cnpm run dev

 

 

 

在浏览器上输入:localhost:8080,将会出现下面的vue初始界面

 

5) 结束项目运行:

      Ctrl+v,选择Y即可停止项目的运行

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM