Rumah hujung hadapan web tutorial js Vue.js环境搭建教程介绍

Vue.js环境搭建教程介绍

Mar 22, 2017 pm 01:30 PM
vue.js membina

这篇文章主要为大家分享了一份超简单的Vue.js环境搭建教程,帮助大家快速搭建vue环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下)

1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。

这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

安装完npm镜像后,开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。方法:cnpm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明---安装成功

2.安装完脚手架以后开始,开始创建一个新项目:命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

过程中会出现 

Vue.js环境搭建教程介绍

3 cd vue_project

安装依赖,生成node_modules目录(安装依赖的代码库)

npm install=>会生成这个文件夹node_modules(注:当我们把用vue-cli脚手架搭建成的vue项目复制到其他地方时,要把node_modules目录删除,不然在其他地方无法执行cnpm run dev,这其中设计到路径的问题。删除之后要重新cnpm install)

npm run dev  准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中或者输入运行”npm run dev”的时候执行的是build/dev-server.js文件,运行”npm run build”的时候执行(用来执行发布的)的是build/build.js文件,我们可以从这两个文件开始进行代码阅读分析。

Devdeendencies是表示我们编译过程的一些依赖。

Readme文件:项目的描述文件

每个组件分为三个部分:模板、逻辑、样式

cnpm run dev 回车即可 ,就会打开浏览器http://localhost:8080 

应用场景:

针对具有复杂交互逻辑的前端应用;

它可以提供基础的架构抽象;

可以通过AJAX数据持久化,保证前端用户体验。

好处:

当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。

Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

相关文章:

通过纯Vue.js构建Bootstrap组件

强大Vue.js组件详细说明

超全面的vue.js使用总结

Atas ialah kandungan terperinci Vue.js环境搭建教程介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Rimworld Odyssey Cara Ikan
4 minggu yang lalu By Jack chen
Apakah had transaksi untuk pengguna asing di Alipay?
1 bulan yang lalu By 下次还敢
Bolehkah saya mempunyai dua akaun Alipay?
4 minggu yang lalu By 下次还敢

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1505
276
Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Apr 24, 2023 am 10:52 AM

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

Terokai cara menulis ujian unit dalam Vue3 Terokai cara menulis ujian unit dalam Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.

Cara cepat membina sistem carta statistik di bawah rangka kerja Vue Cara cepat membina sistem carta statistik di bawah rangka kerja Vue Aug 21, 2023 pm 05:48 PM

Cara cepat membina sistem carta statistik di bawah rangka kerja Vue Dalam aplikasi web moden, carta statistik merupakan komponen penting. Sebagai rangka kerja bahagian hadapan yang popular, Vue.js menyediakan banyak alatan dan komponen yang mudah yang boleh membantu kami membina sistem carta statistik dengan cepat. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan beberapa pemalam untuk membina sistem carta statistik ringkas. Pertama, kita perlu menyediakan persekitaran pembangunan Vue.js, termasuk memasang perancah Vue dan beberapa pemalam yang berkaitan. Jalankan arahan berikut dalam baris arahan

Vue.js vs React: Pertimbangan khusus projek Vue.js vs React: Pertimbangan khusus projek Apr 09, 2025 am 12:01 AM

Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.

Bolehkah bangunan dibina di alam liar di Mistlock Kingdom? Bolehkah bangunan dibina di alam liar di Mistlock Kingdom? Mar 07, 2024 pm 08:28 PM

Pemain boleh mengumpul bahan yang berbeza untuk membina bangunan apabila bermain di Mistlock Kingdom Ramai pemain ingin tahu sama ada untuk membina bangunan di alam liar Bangunan tidak boleh dibina di dalam Mistlock Kingdom. . Bolehkah bangunan dibina di alam liar di Mistlock Kingdom? 1. Bangunan tidak boleh dibina di kawasan liar Kerajaan Mist Lock. 2. Bangunan mesti dibina dalam skop altar. 3. Pemain boleh meletakkan Spirit Fire Altar dengan sendirinya, tetapi apabila mereka meninggalkan julat, mereka tidak akan dapat membina bangunan. 4. Kita juga boleh terus menggali lubang di gunung sebagai rumah kita, jadi kita tidak perlu menggunakan bahan binaan. 5. Terdapat mekanisme keselesaan dalam bangunan yang dibina oleh pemain sendiri, iaitu, lebih baik dalaman, lebih tinggi keselesaan. 6. Keselesaan yang tinggi akan membawa bonus atribut kepada pemain, seperti

Adakah vue.js sukar belajar? Adakah vue.js sukar belajar? Apr 04, 2025 am 12:02 AM

Vue.js tidak sukar untuk dipelajari, terutamanya bagi pemaju dengan asas JavaScript. 1) Reka bentuk progresif dan sistem responsif memudahkan proses pembangunan. 2) Pembangunan berasaskan komponen menjadikan pengurusan kod lebih cekap. 3) Contoh penggunaan menunjukkan penggunaan asas dan lanjutan. 4) Kesilapan biasa boleh disahpepijat melalui Vuedevtools. 5) Pengoptimuman prestasi dan amalan terbaik, seperti menggunakan V-IF/V-Show dan atribut utama, boleh meningkatkan kecekapan aplikasi.

Apakah cara terbaik untuk menyediakan akaun Douyin? Apakah kit penciptaan akaun lima keping? Apakah cara terbaik untuk menyediakan akaun Douyin? Apakah kit penciptaan akaun lima keping? Apr 02, 2024 am 09:52 AM

Dengan perkembangan pesat Internet mudah alih, aplikasi video pendek Douyin telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian orang ramai. Mempunyai akaun Douyin yang popular bukan sahaja dapat menarik perhatian peminat, tetapi juga membawa nilai komersial. Jadi, bagaimana untuk menyediakan akaun Douyin yang terbaik? 1. Apakah cara terbaik untuk menyediakan akaun Douyin? 1. Kedudukan yang jelas Apabila membuat akaun Douyin, anda mesti terlebih dahulu menjelaskan kedudukan anda. Adakah anda ingin menjadi pelawak lucu atau pekongsi pengetahuan profesional? Kedudukan yang jelas boleh membantu menarik peminat yang tepat, dengan itu meningkatkan nilai akaun anda. 2. Penamaan akaun: Nama akaun yang baik boleh membuatkan peminat mengingati anda sepintas lalu. Nama akaun hendaklah ringkas dan jelas, berkaitan dengan kedudukan anda, dan mempunyai tahap kreativiti tertentu. Elakkan menggunakan nama yang terlalu biasa untuk mengelakkan kekeliruan dengan orang lain

Pasang PyTorch dalam PyCharm dengan pantas: panduan mudah Pasang PyTorch dalam PyCharm dengan pantas: panduan mudah Feb 24, 2024 pm 09:54 PM

Panduan Pemasangan PyTorch: Sediakan persekitaran pembangunan dengan pantas dalam PyCharm PyTorch ialah salah satu rangka kerja yang paling popular dalam bidang pembelajaran mendalam semasa Ia mempunyai ciri-ciri kemudahan penggunaan dan fleksibiliti, dan digemari oleh pembangun. Artikel ini akan memperkenalkan cara cepat menyediakan persekitaran pembangunan PyTorch dalam PyCharm, supaya anda boleh memulakan pembangunan projek pembelajaran mendalam. Langkah 1: Pasang PyTorch Mula-mula, kita perlu memasang PyTorch. Pemasangan PyTorch biasanya perlu mengambil kira persekitaran sistem

See all articles